如何使用setInterval保存我的间隔时间？ [英] How to save my interval time using setInterval?
问题描述
我已经使用 setInterval（）构建了一个循环中的图像动画的以下jQuery。
$（document）.ready（function（）{
var runAnimate1 = true;
var runAnimate2 = false;
var runAnimate3 = false;
setInterval（function（）{
if（runAnimate1）{
$（＃animate1）。fadeIn（'slow'）。animate（{
'display'：'inline -block'，
'margin-left'：'220px'，
'margin-bottom'：'20px'
}，500，function（）{
$ .1st'）。animate（{
'opacity'：'0'
}，1000，function（）{
$（'。1st'）。animate（{
'opacity'：'1'
}）
}）
}）fadeOut（）;
$（＃animate1）。fadeIn（'slow'）。animate （{
'margin-bottom'：'0px'，
'margin-left'：'-140px'
}，1000，function（）{
runAnimate1 = false;
runAnimate2 = true;
runAnimate3 = false;
}）。fadeOut（'slow'）;
}
if（runAnimate2）{
$（。2nd）。fadeIn（'slow'）。animate（{
'margin-left' '150px'，
'margin-bottom'：'2px'
}，600，function（）{
$（'。1st'）。animate（{
'opacity '：'0'
}，1000，function（）{
$（'1st'）。animate（{
'opacity'：'1'
}，1000 ）
}）
}）。fadeOut（）;
$（。2nd）。fadeIn（'slow'）。animate（{
'margin-bottom'：'0px'，
'margin-left'：'-150px'
}，1000，function（）{
runAnimate1 = false;
runAnimate2 = false;
runAnimate3 = true
}）fadeOut（'slow'）;
}
if（runAnimate3）{
$（'。3rd'）。fadeIn（'slow'）。animate（{
'display'：'inline -block'，
'margin-left'：'220px'，
'margin-bottom'：'2px'
}，1000，function（）{
$ .1st'）。animate（{
'opacity'：'0'
}，1000，function（）{
$（'。1st'）。animate（{
'opacity'：'1'
}）
}）
}）fadeOut（'slow'）;
$（'。3rd'）。fadeIn（'slow'）。animate（{
'margin-bottom'：'0px'，
'margin-left'：'-220px'
}，1000，function（）{
runAnimate1 = true;
runAnimate2 = false;
runAnimate3 = false;
}）fadeOut（'slow'）;
}
}，6000）;
}）;
目前，这个jQuery在一个循环中运行，并逐个给不同的图像动画。现在，有时这些所有动画一起运行，而不是保持特定的时间间隔。我想在我的浏览器上一个接一个地显示所有的动画。我的html如下..
< div id =outer-boxclass =1st>
< img class =1stsrc =img / sofa2.jpg>
< div id =animate1style =display：none; position：absolute; bottom：0; left：0;>
< img class =1stsrc =img / chotu.pngstyle =height：300px; width：200px; />
< / div>
< div class =2nd 1ststyle =display：none; position：absolute; bottom：0; left：0>
< img src =img / hand.pngstyle =width：200px; height：300px;>
< / div>
< div class =3rd 1ststyle =display：none; position：absolute; bottom：0; left：0>
< img src =img / handyh.pngstyle =width：180px; height：150px;>
< / div>
< / div>
EDIT
（完成新答案）
我今天已经检查过您的脚本。
问题来自于你在 我已将 请注意，animation＃3 。 动画＃4出现得太快。 给定有3张图片一个一个显示，每个6秒： 所以第一个33％是第一个图像的动画。 分割这些33％部分，实现每张图片上的动画。 I have built the following jQuery for image animation in a loop using Currently this jQuery runs in a loop and give animation to different images one by one. Now, sometimes these all animations are run together and not maintain specific time interval. I want to display all animation perfectly on my browser one by one. My html is as follow..
EDIT I've checked your script again today. The problem comes from the fact that you use I've added some Notice that the message "animation #3" appears too many times. Also notice that "animation #4" appears too soon. This animation, in my opinion, can't be achieved this way. Given there is 3 images to display one by one, 6 seconds each: So the first 33% is to animate the fist image. Divide these "33%" parts achieve your animation on each image. 这篇关于如何使用setInterval保存我的间隔时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ .animate（）的回调中使用 .animate（） $ c> ...
此外，在 .animate（）（第三级）的回调的回调中。
console.log（）添加到您的小提琴，以显示动画不会按我想要的顺序发生。
（在键盘上按[F12]键查看控制台）
我想这是由于某些内部jQuery 动画结束事件bubble。
这是因为它不等待动画＃1的所有回调结束。
几乎在同一时间触发时间为动画＃1。
所以...
您最好使用CSS @keyframes 。
我制作了另一个小提琴来告诉你如何。
100％将是18秒。
您必须将动画的100％除以3，即33％。
第二个图像的33％到66％。
$ b $
喜欢5％到褪色，10％移动... setInterval().$(document).ready(function() {
var runAnimate1 = true;
var runAnimate2 = false;
var runAnimate3 = false;
setInterval(function() {
if (runAnimate1) {
$("#animate1").fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '20px'
}, 500, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut();
$("#animate1").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-140px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = true;
runAnimate3 = false;
}).fadeOut('slow');
}
if (runAnimate2) {
$(".2nd").fadeIn('slow').animate({
'margin-left': '150px',
'margin-bottom': '2px'
}, 600, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
}, 1000)
})
}).fadeOut();
$(".2nd").fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-150px'
}, 1000, function() {
runAnimate1 = false;
runAnimate2 = false;
runAnimate3 = true
}).fadeOut('slow');
}
if (runAnimate3) {
$('.3rd').fadeIn('slow').animate({
'display': 'inline-block',
'margin-left': '220px',
'margin-bottom': '2px'
}, 1000, function() {
$('.1st').animate({
'opacity': '0'
}, 1000, function() {
$('.1st').animate({
'opacity': '1'
})
})
}).fadeOut('slow');
$('.3rd').fadeIn('slow').animate({
'margin-bottom': '0px',
'margin-left': '-220px'
}, 1000, function() {
runAnimate1 = true;
runAnimate2 = false;
runAnimate3 = false;
}).fadeOut('slow');
}
}, 6000);
});
<div id="outer-box" class="1st">
<img class="1st" src="img/sofa2.jpg">
<div id="animate1" style="display: none; position: absolute; bottom: 0; left: 0;">
<img class="1st" src="img/chotu.png" style="height:300px; width:200px;" />
</div>
<div class="2nd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/hand.png" style="width:200px; height:300px;">
</div>
<div class="3rd 1st" style="display:none; position:absolute; bottom:0; left:0">
<img src="img/handyh.png" style="width:180px; height: 150px;">
</div>
</div>
(complete new answer).animate() within the callback of an .animate()...
Moreover, within the callback of a callback of an .animate() (3rd level).console.log() into your Fiddle to show that the animation do not occur in the order I suppose you wish it to be.
(Hit [F12] on your keyboard to look at the console)
I suppose this is due to some internal jQuery animation ended event that "bubbles".
This is because it doesn't wait for all callback of "animation #1" to end.
It is triggered almost at the same time as "animation #1".So...
You better use the CSS @keyframes.
I made another Fiddle to show you how.
100% will then be 18 seconds.
You have to divide the 100% of the animation by 3, which is 33%.
33% to 66% for the second image.
66% to 100% for the third image.
Like 5% to fadein, 10% to move...
