如何创建平滑的fadeIn（）jQuery

问题淡出和淡出是零星的。理想情况下，我希望fadeIn（）一个接一个地发生；然而，淡出（）是一次完成的。我觉得这两者的任何组合都可以

背景：我编写了一个快速过滤器，用于隐藏和显示我的作品集。以及一些动画交互来支持它。问题是我的交互有点不协调，所以我想在它们之间添加一个转换。问题是，简单的fadeIn（）fadeOut（）确实不可靠。以下是它的古怪之处：

（我只将此转换应用于打印导航按钮）

更新

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

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

精简脚本（）

框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--> 

<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>

转换触发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--> 

<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脚本编写还很陌生，所以关于修复的注释会很受欢迎。

您可以使用

show（'slow'）

或

fadeIn（'slow'）

或时间（毫秒）

fadeIn（500）

查看文档了解更多信息。要添加层次结构，请使用函数作为第二个参数：

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

---

传递回调函数并搜索其上的隐藏框

大概是这样的：

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

---

以下是关于如何制作动画的不同观点。要删除的框的动画宽度为零。正在添加的长方体将从零宽度设置为其正常宽度。这就产生了事物生长到位的效果。移除所有框，然后按顺序添加。您可以在此处看到它的工作原理：

代码的核心部分是两个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);
        });
    });
}

jQuery.fn.fadeInSequence=函数（t，fn）{
if（t的类型==“函数”）{
fn=t；
t=1000；
}
t=t | | 1000；
var-pos=0；
var self=这个；
函数fadeInNext（）{
如果（位置<自身长度）{
var项目=自我平衡（pos++）；
如果（项为（“：隐藏”））{
css（{宽度：0，溢出：“隐藏”}）；
item.show（）.animate（{width:“25%”），t，fadeInNext）；
}否则{
fadeInNext（）；
}
}否则{
如果（fn）{
fn.呼叫（自我）；
}
}
}
fadeInNext（）；
回归（自我）；
}
jQuery.fn.fadeutsequence=函数（t，fn）{
if（t的类型==“函数”）{
fn=t；
t=1000；
}
t=t | | 1000；
var-pos=0；
var self=这个；
函数fadeOutNext（）{
如果（位置<自身长度）{
var项目=自我平衡（pos++）；
如果（项是（“：可见”））{
css（“溢出”、“隐藏”）.animate（{width:“0”}，t，function（）{
item.hide（）；
淡出下一步（）；
});
}否则{
淡出下一步（）；
}
}否则{
如果（fn）{
fn.呼叫（自我）；
}
}
}
淡出下一步（）；
回归（自我）；
}
功能doFadeInOut（外选择器、内选择器、隐藏选择器）{
var hideItems=$（hideSelector.hide（）；
var outItems=$（“.box”）.find（outSelector.closest（“.box”）；
var inItems=$（“.box”）.find（插入选择器）.closest（“.box”）；
outItems.not（inItems）.fadeOutSequence（函数（））{
inItems.fadeInSequence（函数（）{
海登（500）；
});
});
}

---

这里有一个版本，我已经删除了很多复制的代码（DRY），所以一个普通的代码块可以处理所有的四次点击：

啊，这看起来很有趣，是什么触发了这个函数，这就像一个循环，对吧？这是递归函数，会一直运行，直到不再有隐藏的框。是的，对不起，我的编程太丢脸了。但逻辑是有道理的。它只是让我的大脑更清醒一点。你能再帮我一点忙吗？使用$（self）.find（'print'）.fadeIn（）；在第二次showNextBox（）调用之后。对于每种打印、视频和网络样式，这里的完整脚本都经过了完美的删减，因此您可以更好地了解它的工作原理。从逻辑上讲，这是有道理的。我明白你的意思，但从语义上说，我不能让它起作用，这太棒了。它运行有点不稳定。@MatthewHarwood-“运行有点不稳定”是什么意思？我真的很喜欢这个想法，但它似乎有点不稳定。如果它总是能够正确删除并从左到右追加顺序。我觉得它的“古怪”将被删除。我最近更新了TH代码，如果你想看一看。@ MatthewHarwood -是的，这个问题发生是因为事情在中间变得可见，导致所有的东西都跳出来。如果只在末尾添加，您将看不到。我如何将它们附加到末尾？简单吗？我还是编写jquery的新手