Scroll over a div and animate another div

Question

I have 1 to 6 divs that are created dynamically. I also have nested divs inside of these that I want to animate when I scroll over the parent div. Right now when I scroll over it animates all the divs, How would I send each one as an argument?

here is a jsfiddle with my code

<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

Use mouseenter and mouseleave . The problem is that mouseoever / mouseout get triggered when you move between child elements, which you don't want.

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

Answer 2

By calling $('.move') you're searching for all elements with class move in document and you want to animate only child elements of currently hovered element. Also its better to use mouseenter and mouseleave (see documentation: mouseenter and 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);
    });
});