停止懸停/鼠標懸停的動畫 - 用於選定的元素？

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

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