Question

我在将一个单击函数附加到一个非常简单的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();
        });
    }); 
});

Answer 1

您需要更改循环，在click事件中移动“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();
      }); 
   });
});

Answer 2

只需使用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);
        }); 
    });
});

Answer 3

<强> Working jsFiddle Demo

您必须在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();
        });
    }); 
});

附加延迟的点击功能

3 个答案: