Solved

jquery animation

Posted on 2011-09-08
3
345 Views
Last Modified: 2012-05-12
I want after the p shows up, the span comes in, but it's not working, what am I doing wrong here?



$('p').css('display','block');
$('p').css('opacity',.2);

     
   $('p').animate({opacity:1, color:'#c03', marginLeft:'200px'},'slow').load(function(){ yeahBaby();  });
   
   
   
   function yeahBaby(){
         $('span').css('display','block');

         $('span').css({opacity:.2});
         $('span').animate({opacity:1, duration:5000},'slow');
         }
   
0
Comment
Question by:charmingduck
  • 2
3 Comments
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 125 total points
ID: 36502129
Check below link
http://jsfiddle.net/ukP9K/

Code is here

<!DOCTYPE html>
<html>
<head>
<title>Kiran Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('p').css('display','block');
 $('span').css('display','none');
 $('p').css('opacity',.2);
 $('p').animate({opacity:1, color:'#c03', marginLeft:'200px'},'slow',function(){yeahBaby();});
});
   
   function yeahBaby(){
     $('span').css('display', 'block');
      $('span').css('opacity',.2);
     $('span').animate({
       opacity: 1,
       duration: 5000
     }, 'slow');
   }

</script>
</head>
<body>
  <form>
  <p>This is para</p>
  <span>This is span</span>
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:charmingduck
ID: 36502169
thanks, but why the load() is not working here?
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36502179
Check the use of jquery load method http://api.jquery.com/load/
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
date format angularjs2 16 41
Compare site how does it work 4 52
Why add + "" to end of  Math.random? 8 32
Asp.net mvc 5 5 19
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now