jQuery 动画 mouseenter-mouseleave 在砖块上答案

【问题标题】：jQuery animation mouseenter-mouseleave on bricksjQuery 动画 mouseenter-mouseleave 在砖块上
【发布时间】：2013-12-31 12:56:42
【问题描述】：

我会尝试为没有 CSS3 功能的砖块制作动画。
我有几个街区并排。当鼠标进入砖块时，砖块内的信息为切换（关闭砖块>砖块打开）和鼠标离开，返回原始（砖块打开>砖块关闭）。

您可以在这里找到示例：FIDDLE（使用的框架：jQuery + jQuery UI）

$('.brick').on('mouseenter', function(e){
    // hide previous brick-on displayed
    $('.brick-on:visible').hide("drop",{ direction: "down" }, 200, function(){
        $(this).prev('.brick-off').show("drop",{ direction: "up" }, 100);           
    });

    $(this).children('.brick-off').hide("drop",{ direction: "up" }, 200, function(){
        $(this).next('.brick-on').show("drop",{ direction: "up" }, 100);
    });
}).on('mouseleave', function(e){
    $(this).children('.brick-on').hide("drop",{ direction: "down" }, 200, function(){
        $(this).prev('.brick-off').show("drop",{ direction: "up" }, 100);           
    });
});

但是我在使用 mouseenter/mouseleave 操作时遇到了问题。有时当你在积木上快速翻滚时，一些积木会保持其 mouseenter 状态，而它们通常不必这样做，因为我不在。

谁能解释一下它是如何正常工作的。

【问题讨论】：

标签： jquery mouseenter mouseleave

【解决方案1】：

由于某种原因，当您为hide() 或show() 添加动画类型时，动画部分无法识别mouseleave 事件。在您的情况下，您使用了drop。

当您只为hide() 或show() 功能应用速度时，mouseleave 事件会被识别。

$('.brick').each(function() {

$(this).mouseover(function() {
    $(this).children(".brick-off").hide( "fast" );
    $(this).children(".brick-on").show( "fast" );
});

 $(this).mouseleave(function() {
    $(this).children(".brick-on").hide( "fast" );
    $(this).children(".brick-off").show( "fast" );
});

});

Fiddle

【讨论】：

【解决方案2】：

$(this).children('.brick-off').hide("drop",{ direction: "down" }, 20, function(){
    $(this).next('.brick-on').show("drop",{ direction: "down" }, 10);
});

问题在于 mouseenter()。

我已尝试将您的时间速度更改为 20 毫秒和 10 毫秒。这意味着鼠标必须在 30 毫秒内进入 .brick 类，并且当 mouseleave() 应该工作时。

解决方案：更改时间速度或更好的方法是从您的线路中删除滴。因为它是错误，我找不到如何解决这个问题。代码应该是这样的：

$(this).children('.brick-off').hide( 200, function(){
    $(this).next('.brick-on').show( 3000);
});

我放了3000ms（3秒），当mouseleave()时它仍然恢复正常。

【讨论】：