如何使用setInterval保存我的间隔时间

如何使用setInterval保存我的间隔时间

关注
发信
关注(28)粉丝(399)

如何使用setInterval保存我的间隔时间？

本文介绍了如何使用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

（完成新答案）



我今天已经检查过您的脚本。



问题来自于你在 .animate（）的回调中使用 .animate（） $ c> ...

此外，在 .animate（）（第三级）的回调的回调中。

我已将 console.log（）添加到，以显示动画不会按我想要的顺序发生。

（在键盘上按[F12]键查看控制台）



请注意，animation＃3 。

我想这是由于某些内部jQuery 动画结束事件bubble。



动画＃4出现得太快。

这是因为它不等待动画＃1的所有回调结束。

几乎在同一时间触发时间为动画＃1。



所以...





您最好使用CSS @keyframes 。

我制作了来告诉你如何。



给定有3张图片一个一个显示，每个6秒：

100％将是18秒。

您必须将动画的100％除以3，即33％。



所以第一个33％是第一个图像的动画。

第二个图像的33％到66％。
$ b $



分割这些33％部分，实现每张图片上的动画。

喜欢5％到褪色，10％移动...


I have built the following jQuery for image animation in a loop using 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);
});

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..

<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>
解决方案

EDIT
(complete new answer)

I've checked your script again today.

The problem comes from the fact that you use .animate() within the callback of an .animate()...
Moreover, within the callback of a callback of an .animate() (3rd level).

I've added some 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)

Notice that the message "animation #3" appears too many times.
I suppose this is due to some internal jQuery animation ended event that "bubbles".

Also notice that "animation #4" appears too soon.
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...

This animation, in my opinion, can't be achieved this way.
You better use the CSS @keyframes.
I made another Fiddle to show you how.

Given there is 3 images to display one by one, 6 seconds each:
100% will then be 18 seconds.
You have to divide the 100% of the animation by 3, which is 33%.

So the first 33% is to animate the fist image.
33% to 66% for the second image.
66% to 100% for the third image.

Divide these "33%" parts achieve your animation on each image.
Like 5% to fadein, 10% to move...

这篇关于如何使用setInterval保存我的间隔时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-23 00:17
Powered by LMLPHP ©2024 如何使用setInterval保存我的间隔时间 0.041033