Question

我需要一些帮助。我试图让我的div“你好”在定时循环中滑入和滑出。如下所示。

滑入（暂停）：5秒

滑出（暂停）：12秒

滑入（暂停）：5秒

滑出（暂停）：12秒

继续这样做！

这是JSFiddle的一个例子 https://jsfiddle.net/08nr9ya5/

<div id="hello">
  Hello World!
</div>

function show() {
  setTimeout(function() {
    $('#hello')
      .css('margin-right', -$(this).width())
      .animate({
        marginLeft: -1500
      }, 900);
  }, 2000);
  hide();
}

function hide() {
  setTimeout(function() {
    $('#hello')
      .css('margin-right', -$(this).width())
      .animate({
        marginLeft: 0
      }, 900);
  }, 5000);
}

show();

Answer 1

实际上我错过了你在show（）函数中调用hide（）而没有超时。你的超时是围绕改变div的代码，而不是启动下一个功能。

我已经清理了一下，你不需要3次超时，只需要2次。我还交换了函数中的代码 - show函数现在实际上有代码在其中使div滑入，而hide函数将其滑出。在您遇到相反的情况之前，只是在超时中被包裹......

function show() {
   // slide in immediatly when show() is called
   $('#hello')
        .css('margin-right', -$(this).width())
        .animate({
          marginLeft: 0
    }, 900);
    // calls hide() after 5 seconds
    setTimeOut(function(){
        hide();
    }, 5000);
}

function hide() {
    // slide out immediatly when hide() is called
    $('#hello')
      .css('margin-right', -$(this).width())
      .animate({
        marginLeft: -1500
      }, 900);
    // calls show() after 12 seconds
    setTimeout(function(){
        show();
    }, 12000);
}

hide();

https://jsfiddle.net/08nr9ya5/2/

在定时循环中滑入和滑出div

1 个答案: