Javascript 滚动一个div并设置另一个div的动画

我有1到6个动态创建的div。我也有嵌套的div，当我滚动到父div上时，我想对它们进行动画处理。现在当我滚动到所有div上时，如何将每个div作为参数发送

这是我的密码

<div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move1
    <div class="move">move1XXXXXXXXXXXXX</div>
  </div>
  <div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move2
    <div class="move">move2XXXXXXXXXXXXX</div>
  </div>
  <div class="animate" id="indexJoinBanner" > 
  Roll over this should animate move3
    <div class="move">move3XXXXXXXXXXXXX</div>
  </div>




<script>
 $('.animate').on('mouseover', function () {
   $('.move').animate({
     left: "0px",
   },500 );
 }).on('mouseout', function () {
   $('.move').animate({
     left: "-150px",
   },500 );
 })
</script>

翻滚此操作应设置move1的动画
移动1xxxxxxxx
翻滚此操作应设置move2的动画
移动2xxxxxxxxx
翻滚此操作应设置move3的动画
移动3xxxxxxxx
$（'.animate'）.on（'mouseover'，function（）{
$（'.move'）。设置动画({
左：“0px”，
},500 );
}).on（'mouseout'，函数（）{
$（'.move'）。设置动画({
左：“-150px”，
},500 );
})

使用

mouseenter

和

mouseleave

。问题是在子元素之间移动时会触发

mouseover

/

mouseout

，这是您不想要的

通过调用

$（'.move'）

您正在使用类move-in-document搜索所有元素，并且您希望仅为当前悬停元素的子元素设置动画。另外，最好使用

mouseenter

和

mouseleave

（请参阅文档：和）

---

太棒了，行得通，如果我想做这样的事情呢@乙烯基开发人员以特定的

.move

元素为目标。只需

$（“.move”）

即可找到所有

.move

s。

$('.animate').each(function () {
    var self = $(this),
        move = self.find('.move');
    self.on('mouseenter', function () {
        move.animate({
            left: "0px"
        }, 500);
    }).on('mouseleave', function () {
        move.animate({
            left: "-150px"
        }, 500);
    });
});