1

mouseenter と mouseout でイベントを実行しようとしています。マウスオーバーを複数回置くと、最初のアニメーションであっても、それを行った回数が繰り返されます。また、mouseleave でアニメーションを停止し、元に戻そうとしています。前もって感謝します

ジャバスクリプトはこちら

$('.velejador').mouseenter(function(){
    $('.velejador').animate({
        left: '-=50',
        width: '40px'
      }, 2000);
}).mouseleave(function(){
    $('.velejador').animate({
        left: '+=50',
        width: '40px'
      }, 2000);
});

ここにhtml

<div id="hidden-cartoons">
    <img src="<?php echo base_url().'assets/img/cartoons/velejador.png' ?>" class="cartoon velejador">
    <img src="<?php echo base_url().'assets/img/cartoons/bodoleite.png' ?>" class="cartoon bodoleite">
</div>
4

3 に答える 3

3

これを試すことができます..

var velejador = $('.velejador');
var position = velejador.position();
velejador.mouseenter(function(){
    var $this = $(this);
    console.log(position);
    $this.css('left',position.left);
    $this.stop(1,0).animate({
        left: '-=50',
        width: '40px'
      }, 2000,function(){
        $this.stop(1,0).animate({
            left: '+=50',
            width: '40px'
        }, 2000);
      });       
});
于 2012-11-02T19:55:00.533 に答える
2

あなたが探しているのは.stop（）です

このフィドルを試してみてください

stop2つ、現在実行中のアニメーションをキャンセルするために使用しました。次に、「+ =50」と「-=50」を絶対値に置き換えました。これらがないと、マウスを出し入れし続けると、divが画面上をどんどん移動してしまうためです。あなたの目的ではありません。

もう1つ覚えておくべきことは、要素を移動またはサイズ変更するmouseenterでアニメーションを実行すると、ユーザーが要素を移動するときに要素を「追跡」しない限り、mouseoutイベントが発生する可能性があることです。

于 2012-11-02T18:36:03.593 に答える
2 
$('.velejador').mouseover(function() {
    $('.velejador').animate({
        left: '-=50',
        width: '40px'
    }, 2000);
}).mouseout(function() {
    $('.velejador').animate({
        left: '+=50',
        width: '40px'
    }, 2000).stop();
});

画像が「mouseout」のどこにあるかによっては、.css() を使用して画像を元の位置に戻すことができます。

于 2012-11-02T18:34:41.990 に答える