1

クリック機能を本当に単純なjqueryにアタッチするのに問題があります。基本的に私がやっていることは、たくさんのliを隠してからフェードインすることです.ページがロードされたときにdocumentreadyで動作させることができますが、クリックにアタッチされたときにフェードインをインクリメントする関数を取得できません。

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {
        var delayInterval = 1000; // milliseconds
        $(this).delay(i * delayInterval).fadeIn();
    });
});

これは完全に機能し、1 秒単位でフェードします。

私がやりたかったのは、それをクリックイベントにバインドすることでした。これは「機能します」が、フェードインを増やしません。

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {
        var delayInterval = 1000; // milliseconds
        $('.extra-related').click(function () { 
            $(".extra-holder ul li").delay(i * delayInterval).fadeIn();
        }); 
    });
});

正解(クリックで非表示を解除):-

$(document).ready(function () {
    $(".extra-holder ul li").hide();
    var delayInterval = 300;

    $('.extra-related').click(function () {
        $(".extra-holder ul li").each(function (i) {
            $(this).delay(i * delayInterval).fadeIn();
        });
    }); 
});
4

3 に答える 3

4

ループを変更し、各ループの「ul li」をクリック イベント内に移動する必要があります。

コードは次のとおりです。

$(document).ready(function () {
  $('.extra-related').click(function () { 
      $(".extra-holder ul li").hide().each(function (i) {
       var delayInterval = 1000; // milliseconds
        $(this).delay(i * delayInterval).fadeIn();
      }); 
   });
});
于 2013-06-11T02:23:26.370 に答える
0

ただ使うsetTimeout()

$(document).ready(function () {
    $(".extra-holder ul li").hide().each(function (i) {

    var delayInterval = 1000; // milliseconds

    $('.extra-related').click(function () { 
            setTimeout(function(){
                $(".extra-holder ul li").fadeIn();
            }, delayInterval);
        }); 
    });
});
于 2013-06-11T02:20:26.863 に答える
0

動作中のjsFiddleデモ

ループclickの外側にイベント ハンドラーをアタッチする必要があります。each

$(document).ready(function () {
    $(".extra-holder ul li").hide();
    var delayInterval = 1000;

    $('.extra-related').click(function () {
        $(".extra-holder ul li").hide().each(function (i) {
            $(this).delay(i * delayInterval).fadeIn();
        });
    }); 
});
于 2013-06-11T02:26:56.203 に答える