Stop animation on hover/mouseover-for selected element ?

Question

Im trying to replicate an effect as seen on http://www.fiat.co.uk/Showroom/#showroom/punto_evo/explore.

I have made a function to animate the 'point of interest' markers which are absolutely posistioned within a parent div and when these markers are hovered over, the child div is shown.

However i am struggling with adding the .stop() function to the animation on hover, so the 'marker' and its contents are static, whist the un-hovered 'markers' continue animating.

I have tried;

$("#triggers a").mouseover(function(){$(this).stop();})

but this does'nt seem to work.

Any help would be greatly appreciated, thanks.

My code is as follows;

CSS

#triggers {
text-align:center;
height: 200px;
position: relative;
width: 500px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
#triggers a {
cursor: pointer;
height: 50px;
width: 50px;
background-image: url(../assets/images/Arrow3%20Right.png);
background-repeat: no-repeat;
}
#feature1 {
position: absolute;
height: auto;
width: auto;
left: 10px;
top: 10px;
}
#feature2 {
position: absolute;
height: 10px;
width: 10px;
left: 45px;
top: 150px;
}
#feature3 {
position: absolute;
top: 45px;
right: 55px;
}
#feature4 {
position: absolute;
top: 60px;
right: 200px;
}
#feature5 {
position: absolute;
top: 67px;
height: 10px;
width: 10px;
left: 150px;
}
.feature-box {
background-color: #F00;
height: auto;
width: 150px;
position: absolute;
left: -50px;
top: -50px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.feature-header {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

HTML

<div id="triggers">

<a id="feature1">
<div class="feature-box">
<p class="feature-header">This is information for this point of interest</p>
<p>This is some more information</p>
</div>
</a>

<a id="feature2">
<div class="feature-box">
<p class="feature-header">This is information for this point of interest</p>
<p>This is some more information</p>
</div>
</a>

<a id="feature3">
<div class="feature-box">
<p class="feature-header">This is information for this point of interest</p>
<p>This is some more information</p>
</div>
</a>

<a id="feature4">
<div class="feature-box">
<p class="feature-header">This is information for this point of interest</p>
<p>This is some more information</p>
</div>
</a>

<a id="feature5">
<div class="feature-box">
<p class="feature-header">This is information for this point of interest</p>
<p>This is some more information</p>
</div>
</a>

</div>

SCRIPT

<script type="text/javascript">
$(document).ready(function() {

function move_box() {
$("#triggers a").animate({"marginTop": "-=10px"},500).animate({"marginTop": ""},500, move_box);
}   

move_box();

$('#triggers a').hover(function() {

$(this).children("div").show();
$(this).toggleClass('active');

}, function() {
$(this).removeClass('active');
$(".feature-box").fadeOut();
});

});
</script>

Answer 1

If you refactored your animations to be per-element it might be a simpler approach, see if this does what you want:

<script type="text/javascript">
  function move_box(elem) {
    elem.animate({"marginTop": "-=10px"}, 500)
    .animate({"marginTop": ""}, 500, function() { move_box($(this)) });
  }

  $(document).ready(function() {
    $("#triggers a").each(function() {
      move_box($(this)); //Start animation on each
    });

    $('#triggers a').hover(function() {
      //Stop this element's animation
      $(this).stop().toggleClass('active').children("div").show();
    }, function() {
      $(this).removeClass('active');
      $(".feature-box").fadeOut();
      move_box($(this)); //Resume animation only on this.
    });
  });
</script>