Question

我是jQuery的新手，我一直在玩它的animate（），但我遇到了两个问题。我的代码基本上应该是当鼠标悬停在它上面时扩展字符窗口，一旦扩展它就改变里面的文本。然后，当鼠标离开现在较大的版本时，字符窗口应缩回到原始大小，在文本开始缩回时更改文本。

我的问题是，这通常很难搞砸。如果您只是将鼠标放大和缩小几次，它会不断扩展和缩回一段时间而不做任何事情，当您进出时文本会闪烁，甚至在收缩之前都不会消失。

我尝试使用回调参数进行鼠标悬停，但有时文本会在动画实际完成之前显示。

这是jQuery，JavaScript，我的服务器，我的客户端还是什么的限制？如果有更好/更有效的方法来实现这一点，我将不胜感激，如果你展示它。

<html>
<body>
<div id="characterwindow" style="width:80px;height:23px;border-radius:15px;">
<div id="characterwindowgraphic" style="border-radius:15px;background-color:#1C1C1C;height:23px;width:80px;">
<center><p1 id="characterwindowtext" style="color:white;">Character</p1></center>
</div></div>

<script>

$("#characterwindow").mouseover(function() {
    setTimeout(function(){$("#characterwindowtext").html("Character<br><br>Name<br>Details");},500);
    $("#characterwindow").css({"width":"300px","height":"250px"});
    $("#characterwindowgraphic").animate({
        width:'300px',
        height:'250px'
    },500);
});

$("#characterwindow").mouseleave(function() {
    $("#characterwindowtext").text("Character");
    $("#characterwindow").css({"width":"80px","height":"23px"});
    $("#characterwindowgraphic").animate({
        width:'80px',
        height:'23px'
    },500);
});

</script>
</body>
</html>

Answer 1

您的动画正在排队。因此，在完成第一个动画之前，它不会启动另一个动画。

要停止在动画之前使用stop()，请执行以下操作：

$("#characterwindowgraphic").stop().animate({
    width:'300px',
    height:'250px'
},500);

它将清除队列。

或者你可以这样称呼你的动画：

$("#characterwindowgraphic").stop().animate({
    width:'300px',
    height:'250px'
},{duration : 500, queue : false});

正如winterblood在评论中所说，使用mouseleave和mouseenter。

这是一个小提琴：http://jsfiddle.net/U6S3S/

编辑：此外，不使用html的超时，而是使用动画回调函数。如果采用第一种方法，它将是这样的：

$("#characterwindowgraphic").stop().animate({
    width:'300px',
    height:'250px'
},500, function(){
    $("#characterwindowtext").html("Character<br><br>Name<br>Details")
});

如果您选择第二种方法，那就是：

$("#characterwindowgraphic").stop().animate({
    width:'300px',
    height:'250px'
},{
   duration : 500, 
   queue : false,
   complete : function(){
      $("#characterwindowtext").html("Character<br><br>Name<br>Details")
   }
});

jQuery animate（）生成野生结果

1 个答案: