Question

问题 fadeins和fadeouts是零星的。理想情况下，我希望 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();
});

Answer 2

您可以使用show('slow')或fadeIn('slow')或以毫秒为单位的时间fadeIn(500)

查看文档以获取更多信息。添加层次结构使用函数作为第二个参数：

$(".box").find('.video, .print, .web').closest('.box').show("slow", function () {
    $(".box").find('.web, .video').closest('.box').fadeOut();
});

Answer 3

以下是关于如何制作动画的另一种看法。要删除的框动画为零宽度。正在添加的框从零宽度到其正常宽度进行动画处理。这使事物生长到位。删除所有框，然后按顺序添加。你可以看到它在这里工作：

http://jsfiddle.net/jfriend00/wEZmw/

代码的核心部分是一些jquery附加方法，可以让你按顺序淡化。 CSS也有调整，以帮助动画看起来更流畅。

jQuery.fn.fadeInSequence = function(t, fn) {
    if (typeof t == "function") {
        fn = t;
        t = 1000;
    }
    t = t || 1000;
    var pos = 0;
    var self = this;
    function fadeInNext() {
        if (pos < self.length) {
            var item = self.eq(pos++);
            if (item.is(":hidden")) {
                item.css({width: 0, overflow: "hidden"});
                item.show().animate({width: "25%"}, t, fadeInNext);
            } else {
                fadeInNext();
            }
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    fadeInNext();
    return(self);
}

jQuery.fn.fadeOutSequence = function(t, fn) {
    if (typeof t == "function") {
        fn = t;
        t = 1000;
    }
    t = t || 1000;
    var pos = 0;
    var self = this;
    function fadeOutNext() {
        if (pos < self.length) {
            var item = self.eq(pos++);
            if (item.is(":visible")) {
                item.css("overflow", "hidden").animate({width: "0"}, t, function() {
                    item.hide();
                    fadeOutNext();
                });
            } else {
                fadeOutNext();
            }
        } else {
            if (fn) {
                fn.call(self);
            }
        }
    }
    fadeOutNext();
    return(self);

}

function doFadeInOut(outSelector, inSelector, hideSelector) {
    var hideItems = $(hideSelector).hide();
    var outItems = $(".box").find(outSelector).closest(".box");
    var inItems = $(".box").find(inSelector).closest(".box");
    outItems.not(inItems).fadeOutSequence(function() {
        inItems.fadeInSequence(function() {
            hideItems.fadeIn(500);
        });
    });
}

而且，这是我删除了大量复制代码（DRY）的版本，因此一个通用代码块会处理所有四次点击：http://jsfiddle.net/jfriend00/XCVy9/

如何制作一个流畅的fadeIn（）jQuery

3 个答案: