jQuery: prevent click queue
$("#right").live("click", function(event) {
$(".image_scroll").animate({"left": "+=300px"}, "slow");
});开发者_开发百科
I need the click to basically not register until the animation is done.
I've tried using return false
but that just seems to kill the link entirely.
Tried also using $(".image_scroll").stop().animate({"left": "+=300px"}, "slow");
but that just makes the animation stutter and look glitchy.
Edit: The id #right
is on an image, not an a
tag. The HTML is as follows:
<img src="/images/right.png" id="right" alt="" />
<div id="container">
<div id="image_scroll">
<img src="1.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div><!-- /#image_scroll -->
</div> <!-- /#container
You need to provide a callback to animate...
$("#right").live("click", function(event) {
event.preventDefault();
var src = $(this).attr('href');
$(".image_scroll").animate({"left": "+=300px"}, "slow", function() { window.location.href = src; });
});
You'll need to store the whether the animation is running or not, you could use the jQuery.data function for that:
$("#right").live("click", function(event) {
var el = $(this),
state = el.data('animation_state');
if(state == 'busy') {
//ignore clicks while the animation is running
return false;
}
el.data('animation_state', 'busy');
$(".image_scroll").animate({"left": "+=300px"}, "slow", function() {
//finished animating
//set the state to finished so we can click the element the next time
el.data('animation_state', 'complete');
});
});
var handler = function(event) {
$("#right").die("click");
$(".image_scroll").animate({"left": "+=300px"}, "slow", function(){
$("#right").live("click", handler);
});
};
$("#right").live("click", handler);
Check if the animation is running and, if so,
$("#right").live("click", function(event) {
if ( $(".image_scroll").is(":animated") ) {
return false;
}
$(".image_scroll").animate({"left": "+=300px"}, "slow");
});
精彩评论