Question

我有3个文字项目。默认情况下都是不可见的。有一个按钮。当用户点击按钮时，应该有2秒的延迟，并且在此延迟之后，循环应该从第一个项目首先可见1秒开始，然后淡出然后第2个项目出现1秒等。

循环在没有setTimout的情况下正常工作。

但我不能用setTimeout引入最初的2秒延迟。（我需要2秒延迟，这对我正在做的事情至关重要）

工作版，没有setTimeout： http://jsfiddle.net/Etienne79/tL3sgjzb/1/

＆＃13;

var $elem = $('#main .trip'), l = $elem.length, i = 0, d = 1000;

$(function() {
  $('.testbtn').on('click', function() {

    
        function go() {
            $elem.eq(i % l).fadeIn(300, function() {
                // $elem.eq(i % l).fadeOut(1500, go);
                $elem.eq(i % l).delay(d).fadeOut(300, go)
                i++;
            })
        };
        go();
          


});
});

＆＃13;

.trip { display: none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

＆＃13;

没有工作，使用setTimout： http://jsfiddle.net/Etienne79/a4yw5ep0/3/

＆＃13;

var $elem = $('#main .trip'), l = $elem.length, i = 0, d = 1000;

$(function() {
  $('.testbtn').on('click', function() {

    setTimeout(
    
        function go() {
            $elem.eq(i % l).fadeIn(300, function() {
                // $elem.eq(i % l).fadeOut(1500, go);
                $elem.eq(i % l).delay(d).fadeOut(300, go)
                i++;
            })
        };
        go();
        
    2000);   


});
});

＆＃13;

.trip { display: none}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>

＆＃13;

Answer 1

您有语法错误，但只是传递函数引用以在delay间隔后执行。

setTimeout(go, 2000);

var $elem = $('#main .trip'),
  l = $elem.length,
  i = 0,
  d = 1000;

$(function() {
  $('.testbtn').on('click', function() {
    function go() {
      $elem.eq(i % l).fadeIn(300, function() {
        // $elem.eq(i % l).fadeOut(1500, go);
        $elem.eq(i % l).delay(d).fadeOut(300, go)
        i++;
      })
    };
    setTimeout(go, 2000);
  });
});

.trip {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="testbtn">show</button>

<div id="main">
  <div id="1" class="trip">Item1</div>
  <div id="2" class="trip">Item2</div>
  <div id="3" class="trip">Item3</div>
</div>

Answer 2

你的setTimeout语法错误

setTimeout('function',time);

应该是

setTimeout(

    function () {
        $elem.eq(i % l).fadeIn(300, function() {
            // $elem.eq(i % l).fadeOut(1500, go);
            $elem.eq(i % l).delay(d).fadeOut(300, go)
            i++;
        })
    };
    ,

2000);

setTimout with＆＃34; hide / show＆＃34;循环不工作

2 个答案: