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

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