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

时间:2013-03-12 01:22:01

标签: javascript jquery animation

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

2 个答案:

答案 0 :(得分:1)

使用mouseentermouseleave。问题是当您在子元素之间移动时会触发mouseoever / mouseout,这是您不想要的。

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

答案 1 :(得分:0)

通过调用$('.move'),您正在搜索文档中具有类移动的所有元素,并且您只想为当前悬停元素的子元素设置动画。最好使用mouseentermouseleave(参见文档:mouseentermouseleave

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