Question

在任何地方找不到 - 或者我正在寻找错误的问题我有一个在查询中运行的动画，客户希望它在几次运行后停止我认为最好声明变量，添加到它并在它运行X周期时停止但是没有线索如何做到这一点。这是基本原则

$(function(){ titles(); });

function titles() {
var cycles = 0;
// ANIMATION START SCRIPT IS IN HERE
}

function titleSlider() {
var cycles = cycles + 1;

// ANIMATION SCRIPT IS IN HERE

if (cycles = 10) { stop };
}

Answer 1

使用promises可以解决这个问题，你可以在函数内部推迟动画调用，并在检查完10个循环后完成调用相同的函数

$(function () {
    titles();
});

function titles() {
    var cycles = 0;
    var titleSlider = function () {
        cycles++;

        $('#test').fadeOut({
            "opacity": "0"
        }, 1000).promise().done(function () {
            if (cycles < 10) {
                titleSlider();
            }
        });
        $('#test').delay(1000).fadeIn(1000);
        console.log(cycles)
    }
    titleSlider();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="test">test</h1>

demo

Answer 2

function titles() {
    var cycles = 0;
    // ANIMATION START SCRIPT IS IN HERE

    function titleSlider() {
        cycles += 1;

        // ANIMATION SCRIPT IS IN HERE
        $('target element').animate({/*animation properties*/}, function(){
            if(cycles != 10){
                titleSlider();
            }
        });
    }

    titleSlider();   
}

X周期后停止查询动画

2 个答案: