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')，您正在搜索文档中具有类移动的所有元素，并且您只想为当前悬停元素的子元素设置动画。最好使用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);
    });
});

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

2 个答案: