4

さまざまなプロジェクトのリスト（順序付けられていないリスト）を含むポートフォリオページを作成しています。ページの読み込み時に、各「li」を次々にフェードインさせたいと思います。私はこのようにこれを達成しました：

var eT = 0;     
$('.everything').hide().each(function() {
    $(this).delay(eT).fadeIn('slow');
    eT += 200;
});

私が抱えている問題は、各liが、それが表す作業のタイプ（Web、印刷など）に基づいてクラス（または複数）を持つことです。表示する作品の種類をフィルタリングできる側へのナビゲーションがあります。私が遭遇したのは、アニメーションがまだアイテムにロードされている間にフィルターをクリックすると、物事が本当に厄介になるということです。

現在の作業ページのテンプレートは次のとおりです。http： //jjaakk.miller-interactive.com/templates/work.html

私は多くのことを試みてきましたが、成功は限られています。これをより安定した方法で機能させる方法について何か考えはありますか？

クリック時に.stop（）を追加しようとしましたが、意図したとおりに機能しませんでした。

4

3 に答える 3

4

問題は jQuery delay() の制限に関連していたと思います。以下では、 jQuery delay() apiで提案されているように、標準の javascript setTimeoutおよびclearTimeoutを使用しています。

<html>
<head>
    <script src="./jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var timeOuts = new Array();
            var eT=200;
            function myFadeIn(jqObj) {
                jqObj.fadeIn('slow');
            }
            function clearAllTimeouts() {
                for (key in timeOuts) {
                    clearTimeout(timeOuts[key]);
                }
            }
            $('.everything').hide().each(function(index) {
                timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
            });
            $('#something').click(function() {
                clearAllTimeouts();
                $('.everything').stop(true,true).hide();
                $('.something').each(function(index) {
                    timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
                });
            });
        });
    </script>
    <style type="text/css">
        li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
        li.something {width:80px;height:80px;background:#000;display:inline-block}
    </style>
</head>
<body>
    <button id="something">BLACK</button>
    <ul>
        <li class="everything"></li>
        <li class="everything something"></li>
        <li class="everything"></li>
        <li class="everything something"></li>
        <li class="everything"></li>
        <li class="everything something"></li>
        <li class="everything"></li>
        <li class="everything something"></li>
        <li class="everything"></li>
        <li class="everything something"></li>
    </ul>
</body>
</html>
于 2011-04-13T19:06:32.620 に答える
3

クリック時に .stop() を追加しようとしたと言ったことは知っています。次のコードはまさにそれを行いますが、私にとってはうまく機能します。これがあなたが探しているものでない場合は、コメントで説明してください。

<html>
<head>
    <script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var eT=0;
            $('.everything').hide().each(function() {
                $(this).delay(eT).fadeIn('slow');
                eT += 200;
            });
            $('.everything').click(function() {
                $('.everything').stop(true,true).fadeIn();
            });
        });
    </script>
    <style type="text/css">
        li.everything {width:40px;height:40px;background:#bbb;display:inline-block}
    </style>
</head>
<body>
    <ul>
        <li class="everything"></li>
        <li class="everything"></li>
        <li class="everything"></li>
        <li class="everything"></li>
        <li class="everything"></li>
    </ul>
</body>
</html>

Working Demo

于 2011-04-13T02:06:43.433 に答える
2

インデックスによる複数の遅延

 var eT = 0;     
    $('.everything').hide().each(function(index) {
        $(this).delay(eT*index).fadeIn('slow');
        eT += 200;
    });
于 2011-04-13T01:28:38.423 に答える