Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Control speed of a jQuery animation

    I am new to jQuery (2 weeks). I would like to set up my animations so that the #logo slides in over a period of 3 seconds, then the #homeDetail fades in over a period of 5 seconds. I don't know how to control the speed of the logo slide, and I don't know how to tell the #homeDetail to start after the slide.

    Here's the code I'm using right now:

    Code:
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("img#homeDetail").fadeIn(5000);
    		
    		var $lefty = $("#logo");
    		$lefty.animate({
    			left: parseInt($lefty.css('left'),10) == 15 ?
    			-$lefty.outerWidth() :
    			15
    		});
        	});
    </script>
    Last edited by marilynn.fowler; 02-14-2011 at 02:00 AM.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The first place to look for answers should always be the official documentation:
    http://api.jquery.com/animate/

    What you're looking for are the "duration" and "queue" options.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I had gone to that page before, but didn't understand it. I did see the word "delay" at some point in my search, and when I went to the "delay" page, I got the answer I needed. Plus, their code made more sense to me.

    Code:
    	$(document).ready(function() {
    		//set opacity of logo and detail to 0, then slide in and fade up
    		$("#logo").css({
    			left: "170px",
    			opacity: "0"
    		}).animate({
    			opacity: 1,
    			left: "10"
    		}, 2000 );
    		
    		//set opacity to 0, delay for 1.2 seconds, then fade up
    		$("#homeDetail").css({
    			opacity: "0"
    		}).delay(1200).animate({
    			opacity: 1
    		}, 2000 );
        	});
    Last edited by marilynn.fowler; 02-14-2011 at 02:05 AM.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •