0

問題フェードインとフェードアウトは散発的です。理想的には、fadeIn（）を1つずつ実行したいと思います。一方、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();  
    }

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スクリプトの記述にかなり慣れていないため、修正に関するメモは非常に喜ばれます。

4

3 に答える 3

1

コールバック関数を渡し、その上にある非表示のボックスを検索します。

このようなもの：

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

これは、アニメーションの実行方法に関する別の見方です。削除されるボックスは、幅がゼロにアニメーション化されます。追加されるボックスは、ゼロ幅から通常の幅までアニメーション化されます。これにより、物事が所定の位置に成長する効果が得られます。すべてのボックスが削除され、順番に追加されます。あなたはそれがここで働くのを見ることができます：

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

コードのコア部分は、フェードを順番に実行できる2つの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）の多くを削除したバージョンで、1つの一般的なコードブロックが4つのクリックすべてを処理します：http：//jsfiddle.net/jfriend00/XCVy9/

于 2012-06-09T04:30:48.427 に答える
0

show('slow')またはfadeIn('slow')をミリ秒単位で使用できますfadeIn(500)

詳細については、ドキュメントを確認してください。2番目の引数として階層使用関数を追加するには：

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