0

我对 jQuery 很陌生，我一直在玩弄它的 animate() 但我遇到了两个问题。我下面的代码基本上应该在鼠标悬停在字符窗口上时扩展字符窗口，一旦扩展就更改里面的文本。然后，当鼠标离开现在更大的版本时，characterwindow 应该缩回到它的原始大小，并在它开始缩回时更改文本。

我的问题是，这通常很糟糕。如果您只是放大和缩小鼠标几次，它会在您不做任何事情的情况下不断扩展和缩回一点，并且当您进出时文本会闪烁，甚至不会在缩回之前消失。

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

这是 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>
4

1 回答 1

0

您的动画正在排队。所以它不会在第一个动画完成之前开始另一个动画。

要停止这种情况，您可以stop()在这样的动画之前使用：

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

它将清除队列。

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

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

也正如 Winterblood 在评论中所说，使用mouseleaveand 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")
   }
});
于 2013-05-17T04:15:40.167 回答