jquery - 如何在jquery中制作动画后暂停

Question

仍在学习使用 jquery 创建简单的动画。我现在正在做的这个是一个连续滑动到其父 div 左侧的 div。我试图在显示子 div 2 秒后暂停，然后在延迟后再次重复动画，但我不好。请帮忙。

请看我的代码

Answer 1

使用 setTimeout 进行延迟。2000 是 2 秒

setTimeout(function(){
   $('.slide-right').delay(5000).css({width:'0'}).animate({width:'100%'}, 800, reslide); 
}, 2000);

这里的例子

Answer 2

这样做很简单：

$(document).ready(function(){
    reslide();
});
function reslide(){
  $('.slide-right').delay(5000).css({width:'0'}).animate({width:'100%'}, 800, function(){
setTimeout(reslide, 2000);
}); 
}

Answer 3

这是一个简单的例子。

html:

<div id="slideRange">
    <div id="slideBox">woohoo</div>
</div>

CSS：

#slideRange{
    width: 100%;
    height:150px;
    position: relative;
    background: green;
}

#slideBox{
    background-color: red;
    color: white;
    width: 150px;
    height:150px;
    line-height:150px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 0;
}

js：

function mySlide() {
    var slideRange = parseInt($('#slideRange').css('width')) - parseInt($('#slideBox').css('width'));
    $('#slideBox')
    .animate({left: 0}, 500)
    .delay(500)
    .animate({left: slideRange}, 1000, function() {
        setTimeout(mySlide, 2000);
    });
}

$(document).ready(function() {
    mySlide(10);
});

演示：http: //jsfiddle.net/RUvZZ/