悬停时动画不会淡入

Question

我正在尝试为侧边栏悬停效果。 但是由于某种原因，如果我将鼠标悬停在侧边栏上的元素过多，它们不会消失。 您可以在此处查看有效的Beta版本：

http://www.nk.thnk.org/

$('#sidebar').stop().animate({ 'width': '40px'}, 500);
$('#sidebar .icon').stop().fadeIn(0);
$('#sidebar #logo').stop().fadeOut(0);
$('#sidebar #nav').stop().fadeOut(0);
$('#sidebar .quote').stop().fadeOut(0);
$('#sidebar .branding').stop().fadeOut(0);

// sidebar
$('#sidebar').hover(function(){
    $('#sidebar').stop().animate({ 'width': '200px'}, 500);
    $('#sidebar .icon').stop().fadeOut();
    $('#sidebar #logo').stop().fadeIn();
    $('#sidebar #nav').stop().fadeIn();
    $('#sidebar .quote').stop().fadeIn();
    $('#sidebar .branding').stop().fadeIn();
}, function(){
    $('#sidebar').stop().animate({ 'width': '40px'}, 500);
    $('#sidebar .icon').stop().fadeIn(function(){ $(this).removeClass('flipped');});
    $('#sidebar #logo').stop().fadeOut();
    $('#sidebar #nav').stop().fadeOut();
    $('#sidebar .quote').stop().fadeOut();
    $('#sidebar .branding').stop().fadeOut();
});

Answer 1

要淡入，该元素必须被视为:hidden 。 因此，如果您在鼠标淡出时悬停它，则jQuery将不会淡入，因为该元素是可见的。

有2个解决方案。 第一个是使用.stop(true, true) 。 使用true作为参数表示“清除队列并跳转到末尾”，并且该元素将在fadeIn()之前隐藏。

但是我最喜欢的解决方案是使用fadeTo() ：

 $(el).fadeTo('slow', 0); //Hide element
 $(el).fadeTo('slow', 1); //Show element

奖金

这是一个更具可读性的代码：

var $sidebar = $('#sidebar'),
    $icons = $sidebar.find('.icon'),
    $otherObj = $sidebar.find('#logo, #nav, .quote, .branding')

$('#sidebar').hover(function(){
    $sidebar.stop().animate({ 'width': '200px'}, 500)
    $icons.stop().fadeOut()
    $otherObj.stop().fadeIn();
}, function(){
    $sidebar.stop().animate({ 'width': '40px'}, 500)
    $icons.stop().fadeIn().done(function(){ $(this).removeClass('flipped');})
    $otherObj.stop().fadeOut();
});