1

我试图在 mouseenter 和 mouseout 上做一个事件。如果我将鼠标悬停不止一次，它会重复我这样做的次数，即使仍然在第一个动画上。我还试图在 mouseleave 上停止动画并将其动画化。提前致谢

这是javascript

$('.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 
$('.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 回答
2

您正在寻找的是.stop()

试试这个小提琴

有两件事，我曾经stop取消任何当前正在运行的动画。其次，我用绝对值替换了 '+=50' 和 '-=50' 因为没有这些，如果你不断进出鼠标，div 最终会在屏幕上越来越远，我认为这是不是你的目标。

要记住的另一件事是，当在 mouseenter 上执行移动或调整元素大小的动画时，您可能最终会触发 mouseout 事件，除非用户在您移动元素时“追逐”该元素。

于 2012-11-02T18:36:03.593 回答