jquery - 如何制作平滑的 fadeIn() jQuery

Question

问题 淡入和淡出是零星的。理想情况下，我希望 fadeIn() 一个接一个地发生；同时，fadeOut() 一次全部完成。这对我来说是 A-ok 的任何组合。

背景:我编写了一个快速过滤器来隐藏和显示我的作品集。连同一些动画交互来支持它。问题是我的交互有点不和谐，所以我想在它们之间添加一个过渡。问题是，简单的 fadeIn() fadeOut() 真的很不稳定。这是它的一个例子:

CLICK HERE LIVE DEMO (我只将此转换应用于打印导航按钮)

更新

我已经用这个脚本解决了我的问题

$(".box").find('.video, .print, .web').closest('.box').show();  
$(".box").find('.web, .video, .print').closest('.box').fadeOut('fast');
$(".box").find('.print').closest('.box').each(function(index) { 
$(this).delay(400*index).fadeIn(300);   
}); 

精简脚本( script.js )

    if( id == 'printInteract'){
        //used for muliple click to refresh the boxes
        $(".box").find('.video, .print, .web').closest('.box').show();
       //finds the classes then filters them out
        $(".box").find('.web, .video').closest('.box').fadeOut()
           //fades in the .box(s) for print
        $(".box").find('.print').closest('.box').fadeIn();  
    }

BOX HTML

<div class="box">
<h1 title="Light me up"></h1>
  <div class="innerbox">
    <figure><img src="http://4.bp.blogspot.com/-FtykQCyUHtg/T51fiRiRE-I/AAAAAAAADTo/mUiItl6lG0Q/s400/inspirational-animated-photography-awesome-4.gif" /></figure>
    <ul class="categorySelect">
<!-- this example has 3 tags so all buttons will show it -->        
      <li class="print"></li>
      <li class="video"></li>
      <li class="web"></li>
    </ul>
  </div>
</div>
<!--end of box--> 

转换触发器 HTML

<li id="printInteract" class="navCenter"><a id="activePrint" class="navBg" href="#"><div class="relativeCenter"><img src="asset/img/print.gif" /><h3 class="print">print</h3></div></a></li>

最后 谁能解释为什么这些盒子如此随机？是加载时间吗？这只是我的脚本层次结构吗(我知道我的脚本写得不好)关于修复的注释会非常受欢迎，因为我是 jQuery 脚本编写的新手。

Answer 1

传递一个回调函数并在其上搜索隐藏的框。

像这样:

function showNextBox() {
    $('.box:hidden').first().fadeIn('slow', function(){
         showNextBox();
     });
}
$(function(){
     showNextBox();
});