Question

我尝试在没有CSS3功能的情况下制作砖块我有几个街区并排。当mouseenter砖，这个砖内的信息切换（砖块关闭＆砖块）和鼠标离开时，回到原始（砖块打砖块）砖块。

你可以在这里找到例子：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操作的问题。有时当你在砖块上快速翻滚时，一些砖块会保持它们的鼠标中心状态，而且它们不必正常，因为我已经离开了。

有人可以解释它是如何正常工作的。

Answer 1

由于某些原因，当您为mouseleave或hide()添加动画类型时，动画部件无法识别show()事件。在您的情况下，您使用了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

Answer 2

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

问题是mouseenter（）。

我试图将你的速度变为20毫秒和10毫秒。这意味着鼠标必须在30ms内处于.brick类中，当mouseleave（）它应该工作时。

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

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

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

jQuery动画mouseenter-mouseleave在砖上

2 个答案: