javascript - 组合 jquery fade 和幻灯片 jquery-ui 时 jquery stop() 不起作用

Question

我使用了以下 JavaScript:

$('.slide-content #show-effect-1').hover(function(){
  $(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
  $(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});

应该发生的是:

• 鼠标输入按钮 --> 内容显示
• 鼠标移开按钮 --> 内容隐藏

问题:当按钮上mouseout的作用时间快于mouseenter的作用时间时，mouseenter时内容会隐藏不显示再次按下按钮。

如何防止这种情况发生？

Answer 1

我决定在单个 animate() 函数中实现这两个函数，而不是使用单独的函数来实现 fadeIn 和幻灯片效果，然后我只是添加了一些 CSS 重置以确保元素在开始之前已准备就绪动画:

$(document).ready(function () {
    var _duration = 1000;
    $('#show-effect-1').hover(function () {
        var $next = $('.text-banner');
        $next.show();
        $next.stop(true, true).css({
            'margin-left': $next.outerWidth() * -1,
                'margin-top': 0,
                'opacity': 0,
                'display': 'block'
        }).animate({
            'margin-left': 0,
                'opacity': 1
        }, _duration);
    }, function () {
        var $next = $('.text-banner');
        $next.stop(true, true).animate({
            'margin-top': $next.height() * -1,
                'opacity': 0
        }, _duration, function () {
            $(this).hide();
        });
    });
});

检查 Updated fiddle

请注意，我必须添加一个容器才能准确地再现幻灯片效果，您可以在没有它的情况下进行测试，看看它是否是您真正需要的