javascript - 滚动一个 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/mouseout在您不想要的子元素之间移动时触发。

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

Answer 2

通过调用$('.move')，您正在搜索文档中具有类移动的所有元素，并且您只想为当前悬停元素的子元素设置动画。也更好用mouseenterand 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);
    });
});