Question

我创建了一个函数，我将鼠标悬停在一个内容框上，一个名为bottomdata的div从顶部向下滑动。此功能很有效，除非您多次滚动框，动画将循环运行。我希望动画运行一次，然后停止，直到它在第一个动画完成循环后再次悬停。

    $(".databox").on('mouseenter', '.box', function() {
        $(this).find('.topdata').slideUp(400);
        $(this).find('.bottomdata').slideDown(350);
    }).on('mouseleave', '.box', function() {
        $(this).find('.bottomdata').slideUp();
        $(this).find('.topdata').slideDown();           
    });

所以我尝试使用stop（）;我也尝试使用finish（）。我甚至尝试使用clearQueue（）。我似乎无法弄明白。非常感谢所有帮助。

我在jsfiddle上添加了一个示例：http://jsfiddle.net/4cx1kygc/

Answer 1

$('.databox').on('mouseenter', '.box', function() {
    var that = $(this);

    that.find('.topdata').stop(true, true).slideUp(400);
    that.find('.bottomdata').stop(true, true).slideDown(350);
}).on('mouseleave', '.box', function() {
    var that = $(this);

    that.find('.topdata').stop(true, true).slideDown();
    that.find('.bottomdata').stop(true, true).slideUp();
});

Documentation Demo

如何在jQuery中停止循环幻灯片

1 个答案: