在悬停/鼠标悬停时停止动画 - 用于选定元素？

Question

我正在尝试复制http://www.fiat.co.uk/Showroom/#showroom/punto_evo/explore 上看到的效果。

我已经制作了一个函数来为绝对定位在父 div 中的“兴趣点”标记设置动画，当这些标记悬停在上面时，会显示子 div。

但是我正在努力将 .stop() 函数添加到悬停动画中，因此“标记”及其内容是静态的，而未悬停的“标记”继续动画。

我试过了；

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

但这似乎不起作用。

任何帮助将不胜感激，谢谢。

我的代码如下；

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

如果您将动画重构为每个元素，这可能是一种更简单的方法，看看这是否符合您的要求：

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