3

我正在尝试使用 jquery 和 CSS 为导航侧边栏的按钮设置动画，我用它来表示当鼠标悬停在每个按钮上时选择了哪个按钮。

目前，我的 CSS 代码如下所示：

#navbutton {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;}

#navbutton.button {color:#77D; background-color: #F0B0D0;}
#navbutton.button_hover {color:#66C; background-color: #FCF; padding:10px;}

还有我的jQuery：

<script type="text/javascript">
$(document).ready(function(){

$("#sidebar div").mouseenter(buttonHover) 

function buttonHover(){
    $(this).stop().switchClass('button','button_hover',500);
    }

$("#sidebar div").mouseleave(button)

function button(){
    $(this).stop().switchClass('button_hover','button',500);
    }   

});
</script>

在我将 .stop() 添加到动画的每个部分之前，每次将鼠标移到每个按钮上然后移除时，动画队列都会堆积起来。但是，现在已经应用了 .stop()，但是，如果在动画期间将鼠标从按钮上移开，则该按钮将冻结并保持在动画中间状态，无法通过将鼠标悬停在页面上来修复被重新加载，而不是恢复到原来的 mouseleave 状态。

从我读过的所有内容来看，情况不应该如此。应用 .stop() 后，谁能说出为什么我的动画队列会被破坏？

4

2 回答 2

3

.stop(true,true)用来让它走到当前动画的结尾，否则它会在任何地方停止。

http://api.jquery.com/stop/

于 2012-12-09T04:40:44.630 回答
0

我尝试了以下似乎在 Firefox 中工作的代码。实际上，如果您在动画中途将鼠标移开或移开，您的权利就会中断。看起来其他人的答案是解决方案。

<html><head>

<style type="text/css">
:button {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;}
.effect {color:#77D; background-color: #F0B0D0;}
.effect_hover {color:#66C; background-color: #FCF; padding:10px;}
</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(":button").mouseenter(buttonHover) 
function buttonHover(){
    $(this).stop().switchClass('effect','effect_hover',500);
    }

$(":button").mouseleave(button)
function button(){
    $(this).stop().switchClass('effect_hover','effect',500);
    }   

});

</script>

</head><body>

<input type="button" value="Test Button">

</body></html>
于 2012-12-09T04:58:05.373 回答