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);
});

应该发生的事情是：

mouseenter按钮 - ＆gt;内容展示
mouseout按钮 - ＆gt;内容隐藏

问题：当按钮上的mouseout快于mouseenter的效果时间时，内容将被隐藏，并且再次mousenter按钮时不会显示。

如何防止这种情况发生？

Answer 1

我没有为fadeIn和幻灯片效果使用单独的函数，而是决定在单个animate()函数中实现它们，然后我只是添加了一些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

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

组合jquery淡入淡出和幻灯片jquery-ui时，jquery stop（）无法正常工作

1 个答案: