JQuery 动画和鼠标悬停

Question

我试图让搜索栏在您将鼠标悬停在图像上时出现在图像旁边，而在您将鼠标悬停在图像旁边的图像上时消失。我基本上已经让它工作了，但它的表现真的很差。很难以书面形式解释它的行为方式，但您可以在这里看到我在说什么：http://thecampusbubble.com/redesign/sandbox/problem.php。我认为很大一部分问题发生在您将鼠标悬停在一张图片上，然后在搜索栏完全出现之前快速转到下一张。

这是我的代码：

<div class='header'>
<div class='pageContainer'>
    <img class='bubbleLogo' src='    ../lib/images/bubbleLogo.png    ' />
    <div class='iconContainer' id='findContainer'>
        <div class='headerIcon findIcon' id='find'></div>
        <div class='searchBar' id='findSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
    <div class='iconContainer' id='buzzContainer'>
        <div class='headerIcon buzzIcon' id='buzz'></div>
        <div class='searchBar' id='buzzSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
    <div class='iconContainer' id='feedContainer'>
        <div class='headerIcon feedIcon' id='feed'></div>
        <div class='searchBar' id='feedSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
</div>

脚本：

$('#find').hover(function(){
    $('#findSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#findContainer').animate({width: 365}, 500);

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#buzzContainer').animate({width: 79}, 500);

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#feedContainer').animate({width: 79}, 500);
});
$('#buzz').hover(function(){
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#findContainer').animate({width: 79}, 500);

    $('#buzzSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#buzzContainer').animate({width: 365}, 500);

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#feedContainer').animate({width: 79}, 500);
});
$('#feed').hover(function(){
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#findContainer').animate({width: 79}, 500);

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#buzzContainer').animate({width: 79}, 500);

    $('#feedSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#feedContainer').animate({width: 365}, 500);
});
$(document).ready(function(){
    $('#buzzSearchBar').animate({ opacity: 0, width: 0 }, 0);
    $('#feedSearchBar').animate({ opacity: 0, width: 0 }, 0);
    $('#buzzContainer').animate({ width: 79 }, 0);
    $('#feedContainer').animate({ width: 79 }, 0);
});

Answer 1

如果我了解问题所在，您可能想尝试使用queues

我想您希望动画在您悬停到另一个元素时立即停止。你可以使用 .clearQueue 来做到这一点