Question

我试图在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>

Answer 1

你可以试试这个..

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);
      });       
});

Answer 2

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

根据图像在“mouseout”上的位置，您可能希望使用.css（）将图像返回到原始位置。

Answer 3

您要找的是.stop()

试试这个fiddle

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

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

Jquery mouseenter和mouseout动画

3 个答案: