Question

我正在尝试制作一个非常简单的幻灯片。

当用户将鼠标从幻灯片显示移出（#slide_container）时，我希望幻灯片显示在悬停时暂停并恢复。虽然幻灯片放映工作正常，但悬停（在一定程度上）也是如此，如果我反复轻弹滑动鼠标和幻灯片，它会完全混乱幻灯片并开始偶尔制作动画（检查下面的小提琴，看看我的意思）。

我尝试添加promise，以便在动画制作之前完成任何排队的动画，但尽管如此，行为仍然存在。

我该如何解决这个问题？

这是小提琴：http://jsfiddle.net/hR6wZ/

我的js代码：

$(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 i = 0;

    var hover_switch = 0;

    $('.slider_container').hover(function() { 
        //Hover mode on
        hover_switch = 1;
    }, function() {
        //Hover mode off
        hover_switch = 0;
        sliderLoop()
    });

    function animateSlider() {
        $(":animated").promise().done(function() {
            $('.slider').finish().animate({ marginLeft: -(slide_width * i) });
        });
    }

    function sliderLoop() {
        setTimeout(function(){          
            //Only runs if hover mode is off;
            if(i < number_of_slides-1 && !hover_switch) {
                i++;
                animateSlider();
                sliderLoop();
            }
            else if (!hover_switch)
            {
                i = 0;
                animateSlider();
                sliderLoop()
            }
        },4000);


    }

    sliderLoop();


});

编辑：我也尝试使用停止代替finish()，但这并没有解决问题..

Answer 1

每次你每次徘徊时调整滑块循环，即使你来回徘徊十次它告诉它并将其调整为动画x次你做的动画。

你可以尝试的是只有滑块循环检查，然后它们即将动画，如果它正在徘徊，并且不会从它每次徘徊时调用滑块循环。另一种方法是在它开始动画之前设置动画持续时间的变量，告诉它如果当前正在动画，则不要调用animateSlider函数所以添加＆amp;＆amp; ！current_animating到sliderloop函数中的每个if语句。然而，这种方法会有所帮助，但可能第一种方式会更好，因为它将永远不会超过每x毫秒的动画，或者无论你设置多长时间。

但总的来说，你可能不应该调用sliderloop函数，如果hover_switch = 0，那么每次你将鼠标悬停时它就会排队滑块循环。

Jquery幻灯片动画表现奇怪（事件发生，在队列中建立）

1 个答案: