0

以下に示すコードがあります。

$(".tagArea li").mouseover(function(){
  $(this).animate({
      borderWidth: "2px"
  }, 1000 );
});
$(".tagArea li").mouseout(function () {
$(this).animate({
      borderWidth: "1px"
  }, 1000 );
});

特定のリスト項目にカーソルを合わせようとすると、適切にアニメーション化されますが、一度だけ停止しません。2、3回続けています。

これを回避する方法、私は何度も試しましたが、良い結果は得られません。

親切に助けてください。

4

3 に答える 3

1

jQuery でアニメーション化する代わりに、 CSS3 Transitionsと : hoverを使用できます。

.tagArea リ {
  -webkit-transition: ボーダー幅 .25s;
     -moz-transition: ボーダー幅 .25s;
          トランジション: ボーダー幅 .25s;
  ボーダー幅: 1px;
}

.tagArea li:hover {
  ボーダー幅: 2px;
}
于 2012-12-20T11:00:59.513 に答える
0

これを試して ：

$(".tagArea li").mouseover(function(){
  $(this).animate({
      borderWidth: "2px"
  }, 1000 );
}) 
.mouseout(function () {
$(this).animate({
      borderWidth: "1px"
  }, 1000 );
});

詳細なリファレンスはhttp://api.jquery.com/mouseover/にあります

于 2012-12-20T10:58:38.533 に答える
0

このシナリオでは.stop()、次のイベントを使用して連鎖させることができます。

$(".tagArea li").mouseover(function(){
   $(this).stop().animate({
      borderWidth: "+=5px"
   }, 500 );
}).mouseout(function () {
    $(this).stop().animate({
      borderWidth: "1px"
    }, 500 );
});

フィドルをチェックアウト: http://jsfiddle.net/YzaCZ/

于 2012-12-20T10:59:50.667 に答える