Question

我在创建暂停时暂停的滑块时遇到问题，因为我在鼠标关闭时再次执行动画功能，如果我快速将鼠标轻弹过它（从而多次调用该功能）它会开始播放，我会喜欢这样只有在其他函数完成时调用该函数，否则它根本不调用（以避免队列建立和乱码动画）

最简单/最好的方法是什么？

$(document).ready(function() {

//get variables
var slide_width      = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;

//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);

var n = 1;

$('.slider_container').hover(function() { 
//Mouse on
    n = 0;
    $('.slider').stop(true, false);
}, function() {
//Mouse off
    n = 1;
    if (fnct == 0) sliderLoop();
});

//Called in Slide Loop
function animateSlider() {
        $('.slider').delay(3000).animate({ marginLeft: -(slide_width * i) }, function() {
            i++;
            sliderLoop();
        });


}

var i = 0;

var fnct = 0

//Called in Doc Load
function sliderLoop() {
    fnct = 1
    if(n == 1) {
        if (i < number_of_slides) {
            animateSlider();
        }
        else
        {
            i = 0;
            sliderLoop();
        }
    }
    fnct = 0
}

sliderLoop();


});

滑块正常工作正常，但如果我快速移动鼠标，那么滑块会快速地来回摇晃......一直试图为此解决这个问题几个小时..

Answer 1

这是修复它的原因，有魅力！

$(document).ready(function() {

//get variables
var slide_width = $('.slider_container').width();
var number_of_slides = $('.slider_container .slide').length;
var slider_width = slide_width*number_of_slides;

//set element dimensions
$('.slide').width(slide_width);
$('.slider').width(slider_width);

var n = 1;
var t = 0;
$('.slider_container').hover(function() { 
    clearInterval(t);
    }, function() {
    t = setInterval(sliderLoop,3000);
});

var marginSize = i = 1;
var fnctcmp = 0;


//Called in Doc Load
function sliderLoop() {
if (i < number_of_slides) {
marginSize = -(slide_width * i++);
}
else
{
marginSize = i = 1;
}

$('.slider').animate({ marginLeft: marginSize });   
}


t = setInterval(sliderLoop,3000);

});

执行功能IF另一个功能完成时不是

1 个答案: