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

来做到这一点

JQuery动画和鼠标悬停

1 个答案: