Stop mouseenter animation when mouseleave
Hi I am using Jquery Flip plugin - http://lab.smashup.it/flip/
I have this code which execute the flip on hover. When mouseenter the '.container' is on the back side. When mouseleave the '.container' is on the front side.
When the mouseleave the '.container' before the mouseenter flip animation has finished, the '.container' does not flip back on the front side. I need to stop the flip when this happens. How would I achieve this? Would I use sometime like 'stop(true, false)' or do I write an 'if ($(this).is(":animated")) {}...' or ' var hovering = 0; $(".container").hover(function() {hovering = 1; },function() { hovering = 0;});..etc'
Please help. Thanks.
$('.container').bind("mouseenter", function() {
var elem = $(this);
if (elem.data('flipped')) {} else {
elem.flip({
direction: 'lr',
speed: 500,
onBefore: function() {
elem.html(elem.siblings('.content').html());
},
onAnimation: function() {
elem.data('flipped', true);
},
onEnd: function() {}
});
}
});
$('.container').bind("mouseleave", function() {
var elem = $(this);
if (elem.data('flipped')) {
elem.flip({
direction: 'rl',
speed: 500,
onBefore: function() {
elem.html(elem.siblings('.initContent ').html());
},
onAnimation: function() {
elem.data('flipped', false);
},
onEnd: function() {}
});
}
});
Hi all nevermind I came up with a slightly different solution which is to hide other divs that is not hovered. Thank you to those who read my question.
$(".container").each(function(i){
$(".container").not($(this)).mouseenter(function() {
$(".container").eq(i).trigger("mouseleave",[true]);
});
});
上一篇: innerHTML使jQuery无效