jQuery Issue With Cycle and Fadeout

Question

Ok so I've run into a bit of an issue. I've got a div that is resized to fit the browser window size and within that div I'm using the cycle plugin to fade through some text. That all works, but what I want to have happen is once the cycle plugin finishes I'd like to have the enter wrapper div (#bigshot) fade out and then have another div slide up from the bottom. For whatever reason, I can not get anything to work. I've tried setting a timeout function, I've tried using a delay function, the works. I'm at a complete loss. The below code is what I currently have that works.

    $(document).ready(function() {
    $('#bigshot').cycle({ 
            fx:      'fade', 
            speed:    1000, 
            timeout:  1500,
            nowrap: 1 
    });
});

function theheight() {
    var height = $(window).height();
    $("#bigshot").css('height', height);
}

$(document).ready(function() {
    theheight();
    $(window).bind('resize', height); 
});

So essentially, once this has run through (which should take 7500 ms), I would fade out the div (#bigshot) and then slide up from the bottom of the screen a new div called #main-content.

Like I said, I've tried everything I can think of and can't get it to work. My guess is that the code above needs to be altered in some fashion in order to make everything work as it should but I'm not a jQuery mastermind. I know enough to get stuff done, but at the end of the day I usually end up needing help so here I am.

FiLeVeR10 FiLeVeR10 · Accepted Answer · 2015-02-20T00:53:25

Did you try end?

$('#bigshot').cycle({ 
  fx:      'fade', 
  speed:    1000, 
  timeout:  1500,
  nowrap:   1,
  end:      function() {
    //animations here, something like... 
    $('#bigshot').fadeOut('fast');
    $('#main-content').css({top: '100%'}).animate({top: '0'},'fast');  
  }
});

You can see a demo using end here, and read more about the api here.

jQuery Issue With Cycle and Fadeout

1 Answers