Jquery - 方 block 淡出又回来

Question

我的一些方 block 有点问题。当用户将鼠标悬停在上面时，它们应该会消失，然后在鼠标移出时恢复到正常的不透明度。问题是，当我将鼠标移出时，它们不会恢复到正常的不透明度。我该如何解决这个问题？

<div class="test"></div>

$('.test').each(function(){
    $(this).animate({'opacity': '1.0'}, 500);
    $(this).hover(function(){    
        $(this).stop(1).animate({'opacity': '1.0'}, 500);    
    }, function(){    
        $(this).stop(1).animate({'opacity': '0.6'}, 500)     // at the end of animation
    });
});

我做了一个JS Bin

任何帮助/教程将不胜感激。

Answer 1

您只是混淆了淡入淡出的顺序。

$(this).hover(function(){    
    $(this).stop(1).animate({'opacity': '0.6'}, 500)     // hover over        
}, function(){    
    $(this).stop(1).animate({'opacity': '1.0'}, 500);    // hover out
});

查看 documentation 中的函数签名

hover( handlerIn(eventObject) , handlerOut(eventObject)  )

第一个函数用于鼠标进入元素时，第二个函数用于鼠标离开元素时。