我有2个jquery动画。我希望他们两者无限循环。第二个动画需要延迟3秒,但只有第一次触发时才会延迟。第二个动画开始后,就不需要延迟了。
到目前为止,我已经创建了一个条带化的代码版本,以使其更清晰。
HTML:
<div class="block1"></div>
<div class="block2"></div>
CSS:
div.block1,
div.block2 {
position: absolute;
display: block;
top: -100%;
height: 100%;
width: 100%; }
jQuery
function block1(){
$("#block1").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
block1();
}
function block2(){
$("#block2").animate({ top: '100%'}, 6000, 'linear', function(){ $(this).css('top', '-100%') });
block2();
}
block1();
block2();
所以我有两个问题。首先,当我尝试调用第二个函数(block2)时,它不起作用。其次,我不知道如何应用我之后的延迟。有什么建议吗?
答案 0 :(得分:0)
您可以使用此代码初始设置延迟,然后动画将无限制地工作而不会有任何延迟。 setTimeout将以指定的延迟调用block1函数,一旦第一个动画完成,它将调用第二个,这将继续无限期。
JS:
function block1() {
$(".block1").animate({
top: '+=10px'
}, 600, 'linear', function() {
block2();
});
}
function block2() {
$(".block2").animate({
top: '+=10px'
}, 600, 'linear', function() {
block1();
});
}
setTimeout(block1, 3000);
CSS:
div.block1, div.block2 {
position: absolute;
display: block;
top: 0;
height: 100px;
width: 100px;
background-color: red;
}
div.block2 { top: 200px; }
HTML:
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>