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

我试图使用jQuery的hover和animate事件使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上，将持续触发

#gamesplate wrapper

以恒定速度移动（我认为是左侧？不确定这是否会将其向右或向左移动）

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

如何正确地实现我的目标？我理想的功能是，当我在

#games上悬停时--向左滚动
div，
#gamesplate wrapper
将以恒定的速度向左移动。将鼠标移到scroll div之外时，移动将立即停止

如何实现这一点？
这将实现您的目标：

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

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

这将设置
#游戏的动画--在悬停时向左滚动
，并在用户停止悬停时停止动画

如果您想了解有关jQuery的
.hover
函数的更多信息，可以找到它。
这应该可以完成您想要完成的任务：

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

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

这将设置
#游戏的动画--在悬停时向左滚动
，并在用户停止悬停时停止动画

如果您想了解jQuery的
.hover
函数的更多信息，可以找到它。
查看中的工作示例

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

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

CSS

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

#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包装器。然后，将鼠标悬停在
#games scroll left
上，将使其线性向左移动。当你从<代码>游戏中滚动时，它将停止在动画的中间，滚动左< /代码>。您可以通过更改时间步长（本例中为25毫秒）和像素增量（本例中为20像素）来更改动画时间，即
timeToLeft
，以达到所需的速度
 查看中的工作示例

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

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

CSS

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

#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包装器。然后，将鼠标悬停在
#games scroll left
上，将使其线性向左移动。当你从<代码>游戏中滚动时，它将停止在动画的中间，滚动左< /代码>。您可以通过更改时间步长（本例中为25毫秒）和像素增量（本例中为20像素）来更改动画时间，即
timeToLeft
，以达到所需的速度
 若要继续设置动画，请递归重复left（）函数，直到鼠标离开

<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>


var animateLeft=false，animateRight=false；
$（函数（）{
$（“#游戏--向左滚动”）.on（'mouseenter'，function（）{
animateLeft=true；
左（）；
}).on（'mouseleave'，function（）{
animateLeft=false；
$（“#游戏盘包装”）.stop（）；
});
$（“#游戏--向右滚动”）.on（'mouseenter'，function（）{
animateRight=true；
对（）；
}).on（'mouseleave'，function（）{
animateRight=false；
$（“#游戏盘包装”）.stop（）；
});
});
函数左（）{
如果（！animateLeft）{
$（“#游戏盘包装”）.stop（）；
返回；
}
$（“#gameplate wrapper”）.animate（{left:'-=20'}，'fast'，left）；
}
功能权限（）{
如果（！animateRight）{
$（“#游戏盘包装”）.stop（）；
返回；
}
$（“#gameplate wrapper”）.animate（{left:'+=20'}，'fast'，right）；
}

要继续设置动画，请递归重复left（）函数，直到鼠标离开

<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>


var animateLeft=false，animateRight=false；
$（函数（）{
$（“#游戏--向左滚动”）.on（'mouseenter'，function（）{
animateLeft=true；
左（）；
}).on（'mouseleave'，function（）{
animateLeft=false；
$（“#游戏盘包装”）.stop（）；
});
$（“#游戏--向右滚动”）.on（'mouseenter'，function（）{
animateRight=true；
对（）；
}).on（'mouseleave'，function（）{
animateRight=false；
$（“#游戏盘包装”）.stop（）；
});
});
函数左（）{
如果（！animateLeft）{
$（“#游戏盘包装”）.stop（）；
返回；
}
$（“#gameplate wrapper”）.animate（{left:'-=20'}，'fast'，left）；
}
功能权限（）{
如果（！animateRight）{
$（“#游戏盘包装”）.stop（）；
返回；
}
$（“#gameplate wrapper”）.animate（{left:'+=20'}，'fast'，right）；
}

 如果这是一个菜单，那么你可能想考虑使用CSS3作为动画。SITePoT有一个关于这个的教程（）如果这是一个菜单，那么你可能想考虑使用CSS3动画。Sitepoint有一个关于此（）的教程，因为您设置了left:20，这意味着长方体将仅向左移动20 px，并在那里停止。我想他想把箱子一直移到左边。这就是为什么他设置了间隔，他试图每25毫秒向左移动20像素好的点，那是我的错，我没有看到25毫秒的设置，因为你设置了左：20，这意味着盒子只会向左移动20像素，然后停在那里。我想他想把箱子一直移到左边。这就是为什么他设置了间隔，他试图每25毫秒向左移动20像素好的点，那是我的错，我没有看到25毫秒的设置