Question

使用Javascript：

jQuery(function() {
jQuery("#showquickfind").mouseover( function() {
    jQuery("#quickfind").animate({height:"show",opacity:"show"},"slow");
        return false;
    });
    jQuery("#quickfind").hover( function() {},
        function() { $("#quickfind").animate({opacity:1.0},1125).slideUp(375);
        return false;
    });
});

HTML：

<a href="" id="showquickfind">show me</a>

<div id="quickfind">
    <ul>
        <li>test</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>

CSS或多或少无关紧要。我该如何停止跳跃？

Answer 1

您可能希望在每个animate命令之前查看链接jQuery.stop()命令。它会停止指定元素上当前正在运行的所有动画。即。

jQuery("#quickfind").stop().animate({ 
    height:"200px", opacity: 1},"slow"); 
    return false;

你是否有理由使用jQuery代替jQuery对象的简写$？即使使用其他使用它的库，也可以使用$ shorthand作为jQuery对象，遵循这种模式 -

(function($) {

//Your code here using $ shorthand for jQuery :)

})(jQuery);

这意味着外部函数范围内的$是jQuery对象的引用。

我已设置your code on this sample page。如果要编辑它，请在URL中添加“/ edit”。

另外，你确定“show”是高度和不透明度的有效值吗？

我的理解是 height 需要设置为auto（即包含块的大小），相对于包含块的长度或百分比，以及不透明度应该是介于0和1之间的值（jQuery抽象出浏览器之间的差异，并将使用适当的即不透明度或过滤器：alpha（不透明度））

Answer 2

你遇到了同样的问题。发生了什么事情，你的悬停事件发生了，快速查找滑动，然后它消失了，所以它再次显示，等等等。

我发现让它停止跳跃的唯一方法是在容器元素上设置一个高度，以便它始终保持高度。

Answer 3

您可能希望使用mouseenter事件，而不是mouseover。

差异在the jQuery documentation中描述。

指针将移入或移出子元素时会触发
鼠标悬停，而 mouseenter 则不会。

还有如何使用它的示例，您必须使用bind()函数。

修改

毕竟最好的解决方案可能是使用hover()，正如Russ Cam在评论中提到的那样。

<强>顺便说一句

你每次都会多次注册悬停句柄，每次都会看到“show me”-link。

为什么这个jQuery动画会上下跳动？

3 个答案: