循环和淡出的jQuery问题答案

【问题标题】：jQuery Issue With Cycle and Fadeout循环和淡出的jQuery问题
【发布时间】：2015-02-20 08:53:25
【问题描述】：

好的，所以我遇到了一些问题。我有一个调整大小以适应浏览器窗口大小的 div，并且在该 div 中我使用循环插件来淡入一些文本。这一切都有效，但我想要发生的是，一旦循环插件完成，我想让输入包装器 div (#bigshot) 淡出，然后让另一个 div 从底部向上滑动。不管出于什么原因，我什么都做不了。我试过设置超时功能，我试过使用延迟功能，工作正常。我完全不知所措。下面的代码是我目前拥有的。

    $(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); 
});

所以本质上，一旦运行完成（应该需要 7500 毫秒），我会淡出 div (#bigshot)，然后从屏幕底部向上滑动一个名为 #main-content 的新 div。

就像我说的那样，我已经尝试了所有我能想到的方法，但无法让它发挥作用。我的猜测是上面的代码需要以某种方式进行更改，以使一切正常工作，但我不是 jQuery 策划者。我知道足以完成工作，但在一天结束时我通常最终需要帮助，所以我在这里。

【问题讨论】：

标签： jquery fadeout jquery-cycle

【解决方案1】：

你试过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');  
  }
});

您可以查看使用 end here 的演示，并阅读有关 api here 的更多信息。

【讨论】：