0

私は jQuery を初めて使用し、その animate() をいじっていましたが、2 つの問題に遭遇しました。以下の私のコードは基本的に、マウスがその上に置かれているときに文字ウィンドウを展開し、展開されると内部のテキストを変更することになっています。次に、マウスが大きくなったバージョンからマウスを離すと、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 がコメントで述べたように、 and を使用mouseleaveしmouseenterます。

ここにフィドルがあります：http://jsfiddle.net/U6S3S/

編集:また、html のタイムアウトを使用する代わりに、アニメーション コールバック関数を使用します。最初の方法を取ると、次のようになります。

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

2 番目の方法を選択すると、次のようになります。

$("#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 に答える