www.webdeveloper.com
Results 1 to 4 of 4

Thread: Starting a function AFTER some Jquery animation has finished!

  1. #1
    Join Date
    Apr 2009
    Posts
    60

    Starting a function AFTER some Jquery animation has finished!

    Hello guys

    I'm obviously a bit dim, but I've Googled this and I now it's possible (and should be easy!), but I can't seem to get this to work.

    Put simply, the div called #yellow does some animation stuff, but then I want the function 'playSlides' to start after it's finished. That should be really simple, right?

    Code:
    // jquery scale... shrink box and move it down the page
    
        $("#yellow")
            .delay(2000) .animate({"height": "20px"}, 500)
            .animate({"width": "20px"}, 500)
      		.animate({ top: "+=325px", marginLeft: "-=316px",}, 900 );
    		
    		
    		// Home page slideshow
    		
    $(document).ready(function playSlides() {
    						   
    	$("#slideshow").css("visibility", "visible");
    	$("#slideshow").css("overflow", "hidden");
    	
    	$("ul#slides").cycle({
    		fx: 'fade',
    		pause: 1,
    		prev: '#prev',
    		next: '#next'
    	});
    	
    	$("#slideshow").hover(function() {
        	$("ul#nav").fadeIn();
      	},
      		function() {
        	$("ul#nav").fadeOut();
      	});
    	
    });
    
    }
    Any help greatly appreciated!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    .animate( properties, [ duration ], [ easing ], [ callback ] )

    properties: A map of CSS properties that the animation will move toward.

    duration: A string or number determining how long the animation will run.

    easing: A string indicating which easing function to use for the transition.

    callback: A function to call once the animation is complete.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Apr 2009
    Posts
    60
    Thank you Padonak.

    After a bit of experimenting I came up with the following (which works)

    Code:
    // jquery scale... shrink box and move it down the page
    
        $("#yellow")
            .delay(2000) .animate({"height": "20px"}, 500)
            .animate({"width": "20px"}, 500)
      		.animate({ top: "+=325px", marginLeft: "-=316px",}, 900,function(){
    																		 
    // callback function to make the main photos visible, then rotate through the other pics																		 
      $(document).ready(function playSlides() {
    						   
    	$("#slideshow").css("visibility", "visible");
    	$("#slideshow").css("overflow", "hidden");
    	
    	$("ul#slides").cycle({
    		fx: 'fade',
    		pause: 1,
    		prev: '#prev',
    		next: '#next'
    	});
    	
    	$("#slideshow").hover(function() {
        	$("ul#nav").fadeIn();
      	},
      		function() {
        	$("ul#nav").fadeOut();
      	});
    	
    });
    });
    
    }

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    good to hear )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles