Question

我试图使用jQuery的悬停和动画事件，当我将鼠标悬停在触发器div上时，以恒定速度左右移动div。

这是我的代码：

$(document).ready(function () {
    $('#games--scroll-left').on('mouseenter', function() {
        this.iid = setInterval(function() {
           $("#gameplate-wrapper").stop().animate({ left: 20 }, 'fast');
        }, 25);
    }).on('mouseleave', function(){
        this.iid && clearInterval(this.iid);     
    });
});

我的思考过程是，将鼠标悬停在#games--scroll-left div上会不断触发#gameplate-wrapper以恒定速度移动（我认为左？不确定这是否会向右或向左移动）。

但这根本不起作用。按照我的计划，悬停事件会一次又一次地触发，但什么也没发生。

如何实现我想要做的正确方法？我理想的功能是当我徘徊在#games--scroll-left div上时，#gameplate-wrapper将以恒定速度向左移动。当您将鼠标移动到滚动div之外时，移动将立即停止。

我如何实现这一目标？

Answer 1

这应该完成你想要做的事情：

$('#games--scroll-left').hover( function() {
    $('#gameplate-wrapper').animate({left: 20px}, 'fast');
}, function() {
    $('#gameplate-wrapper').stop();
});

您可以将left属性设置为您要移动到的宽度参数。

这会在悬停时为#game--scroll-left设置动画，并在用户停止悬停时停止动画。

如果您想了解有关jQuery .hover功能的更多信息，可以找到它here。

Answer 2

查看CODEPEN

中的工作示例

<强> JS

var timeToLeft = $(window).width() * 25 / 20;

$("#games-scroll-left").mouseenter(function() {
   $("#gameplate-wrapper").animate({
       marginLeft:0
   }, timeToLeft ,"linear");
});

$("#games-scroll-left").mouseleave(function() {
   $("#gameplate-wrapper").stop();
   timeToLeft = ($("#gameplate-wrapper").css("margin-left").replace("px","")) * 25 / 20;
});

<强> CSS

#games-scroll-left {
   width: 100px;
   height: 100px;
   background: blue;
   margin: 0 auto;
}

#gameplate-wrapper {
   width: 100px;
   height: 100px;
   background: green;
   margin-left: calc(100% - 100px);
}

在这个例子中，我在右边一直开始#gameplate-wrapper。然后将鼠标悬停在#games-scroll-left上将启动它以线性方式向左移动。当您将鼠标悬停在#games-scroll-left之外时，它将在动画中间停止。您可以通过更改时间步长（本例中为25毫秒）和像素增量（本例中为20像素）来更改动画时间，即timeToLeft，以达到所需的速度。

Answer 3

要继续动画，请递归重复left（）函数，直到mouseleave。

<script>
  var animateLeft = false, animateRight = false;
  $(function() {
    $('#games--scroll-left').on('mouseenter', function() {
      animateLeft = true;
      left(); 
    }).on('mouseleave', function(){
      animateLeft = false;
      $("#gameplate-wrapper").stop();      
    });
    $('#games--scroll-right').on('mouseenter', function() {
      animateRight = true;
      right(); 
    }).on('mouseleave', function(){
      animateRight = false;
      $("#gameplate-wrapper").stop();
    });
  });

  function left() {
    if (!animateLeft) {
      $("#gameplate-wrapper").stop();
      return;
    }
    $("#gameplate-wrapper").animate({left: '-=20'}, 'fast', left);
  }
  function right() {
    if (!animateRight) {
      $("#gameplate-wrapper").stop();
      return;
    }
    $("#gameplate-wrapper").animate({left: '+=20'}, 'fast', right);
  }
</script>

https://jsfiddle.net/wenkhodt/

如何使用jQuery悬停作为触发器以恒定速度左右移动div？

3 个答案: