滚动div并为另一个div设置动画

Question

我有1到6个动态创建的div。 我还在其中嵌套了div，当我在父div上滚动时，我想对其进行动画处理。 现在，当我在其上滚动时，会为所有div设置动画，如何将每个div作为参数发送？

这是我的代码的jsfiddle

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

Answer 1

使用mouseenter和mouseleave 。 问题在于，在mouseoever子元素之间移动时会触发mouseoever / mouseout 。

http://jsfiddle.net/ExplosionPIlls/qNBEJ/3/

Answer 2

通过调用$('.move')您正在搜索文档中带有类移动的所有元素，并且您只希望为当前悬停的元素的子元素设置动画。 使用mouseenter和mouseleave也更好（请参阅文档： mouseenter和mouseleave ）

$('.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);
    });
});