Question

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

请参阅我的code

Answer 1

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

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

Example here

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/

如何在jquery中的动画后暂停

3 个答案: