?
Solved

How do you delay a chain of animations that happen on page load?

Posted on 2013-10-31
2
Medium Priority
?
259 Views
Last Modified: 2013-10-31
Hi guys,

I have this jquery code below, but whatever I do, it does not seem to stop the animation from happening until a certain time has passed after the page has loaded.

I thought that by adding the .delay(4000) in the script below, it would stop anything from happening until that time has passed, but when I load the page, part of the animation still runs first before the delay kicks in.....

Could someone be kind enough to show me what I am doing wrong?

Thanks so very much!


<script language=javascript type='text/javascript'>

$(function(){

$("#hot")
            .delay(4000)
            .addClass('changecolor')
         .animate({left: '+=50', top: '-=50',"height": "50px", "width": "50px"}, 1000)
           .animate({'margin-top': '-50px'}, "slow",
               function() {
 
    $("#hot").hide();
  }
               );
});


</script>
0
Comment
Question by:CFbubu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39614701
$(function(){

$("#hot").delay(4000)
	.queue(function(){
		$("#hot").addClass('changecolor').dequeue()
		.animate({left: '+=50', top: '-=50',"height": "50px", "width": "50px"}, 1000)
		.animate({'margin-top': '-50px'}, "slow",
		function() {
			$("#hot").hide();
		})
	});
})

Open in new window

0
 

Author Closing Comment

by:CFbubu
ID: 39614787
Thanks bro....you nailed it fast!
0

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…
Suggested Courses
Course of the Month10 days, 12 hours left to enroll

764 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