1

我使用了以下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按钮 --> 内容显示
  • mouseout按钮 --> 内容隐藏

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

我该如何防止这种情况发生？

4

1 回答 1

0

我决定在一个函数中实现这两个函数，而不是使用单独的函数来实现淡入淡出和幻灯片效果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();
        });
    });
});

检查更新的小提琴

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

于 2013-08-27T06:23:46.213 回答