加成

Question

我正在尝试为我的侧边栏制作悬停效果。但由于某种原因，我在侧边栏内的元素如果我在它上面悬停太多就不会淡入。您可以在此处查看正在运行的测试版：

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将不会淡入，因为元素是可见的。

有两种解决方案。第一个是使用.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();
});

动画在悬停时不会淡入

1 个答案:

加成