0

问题淡入和淡出是零星的。理想情况下，我希望fadeIn() 一个一个发生；同时，fadeOut() 一下子就完成了。这对我来说任何组合都可以。

背景：我编写了一个快速过滤器来隐藏和显示我的作品集。连同一些动画交互来支持它。问题是我的交互有点不和谐，所以我想在它们之间添加一个过渡。问题是，简单的 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);   
});

精简脚本( 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();  
    }

框 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 脚本编写很陌生。

4

3 回答 3

1

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

像这样的东西：

function showNextBox() {
    $('.box:hidden').first().fadeIn('slow', function(){
         showNextBox();
     });
}
$(function(){
     showNextBox();
});
于 2012-06-08T22:09:42.893 回答
0

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

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

$(".box").find('.video, .print, .web').closest('.box').show("slow", function () {
    $(".box").find('.web, .video').closest('.box').fadeOut();
});
于 2012-06-08T22:01:50.233 回答
0

这是关于如何制作动画的不同看法。被移除的框被动画化为零宽度。正在添加的框从零宽度动画到它们的正常宽度。这给出了事物生长到位的效果。删除所有框，然后按顺序添加。你可以在这里看到它的工作：

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/

于 2012-06-09T04:30:48.427 回答