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 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    48
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Function loading question

    Hi. I'm trying to load a series of functions inside a fadein, but when it loads the animate positions get stuck in a loop for about 12 times, each time resetting back to the proper location. Can someone help me understand what the reason is for the excessive looping through the functions?

    Code:
    This works fine
    
         $("#container1").children().animate({opacity:"0.35", left:"288px", top:"25px", width:"340px", height:"630px"}, 1400, function() {
                    $(this).detach().appendTo($("#container2")).css({left: "0px", top:"0px"});   
                     }).fadeIn();
         $("#container2").children().animate({opacity:"1.0", left:"411px", top:"25px", width:"450px", height:"920px"}, 1400, function() {
                   $(this).detach().appendTo($("#container3")).css({left: "0px", top:"0px"});   
                   }).fadeIn(function(){
                                              $("." + test).fadeIn();
                   });
         $("#container3").children().animate({opacity:"0.1", left:"-800px", top:"-50px", width:"250px", height:"470px"}, 1400, function() {
                $(this).detach().appendTo($("#container1")).css({left: "0px", top:"0px"});       
                }).fadeIn();
    however, when I add it as a function from a fadeOut(), it goes completely wonky
    Code:
    $(".small1, .small2, .small3").fadeOut(function() {
    
    
         $("#container1").children().animate({opacity:"0.35", left:"288px", top:"25px", width:"340px", height:"630px"}, 1400, function() {
                    $(this).detach().appendTo($("#container2")).css({left: "0px", top:"0px"});   
                     }).fadeIn();
         $("#container2").children().animate({opacity:"1.0", left:"411px", top:"25px", width:"450px", height:"920px"}, 1400, function() {
                   $(this).detach().appendTo($("#container3")).css({left: "0px", top:"0px"});   
                   }).fadeIn(function(){
                                              $("." + test).fadeIn();
                   });
         $("#container3").children().animate({opacity:"0.1", left:"-800px", top:"-50px", width:"250px", height:"470px"}, 1400, function() {
                $(this).detach().appendTo($("#container1")).css({left: "0px", top:"0px"});       
                }).fadeIn();
    
    });
    Shouldn't the initial .small1, .small2, .small3's Fadeout, then the rest of the code execute once the fadeOut is finished? I'm not sure why it's not working properly.

    *edit* so it's running through 4 functions for each .class I have in the initial fadeOut. So, is there a way to make a class fadeout, then have a series of functions run through?
    Last edited by 7Blake; 03-20-2014 at 10:08 PM.


 

Posting Permissions

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