Question

我正在处理包含多个图像动画的跟随jquery。我的查询是，通过onunload，我的动画不会一步一步地运行，并且它有时不会保持间隔。有时我的第一个动画和第二个动画一起运行。如何解决它并在特定时间间隔内逐步运行我的所有三个动画？我们可以使用setInterval吗？如果是的话怎么样？如果我在jquery中写了不正确的间隔时间，请原谅我，因为我是jquery的初学者。

setTimeout

我的HTML如下：

$(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);
});

Answer 1

如果将setInterval存储在变量中，您将能够更改它。

要改变一个可能的解决方案的时间：

var interval = setInterval(functionName,3000);
function changeTime(newTime) {
    clearInterval(interval);
    interval = setInterval(functionName,newTime);

}

更改setInterval的间隔和所有动画一起运行

1 个答案: