Stop animation on hover/mouseover-for selected element?
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;
}
#fe开发者_开发知识库ature4 {
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>
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>
精彩评论