CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
user1448485
user1448485

Reputation: 47

jQuery animation only works once or twice?

I'm putting together a site where a client has requested a very specific animation in the quicklink scroller.

I've used jquery animate and jquery fadeIn to complete a glass-shine and glow effect on hover, but when hovered once or twice (partcularly if done in quick succession) it stops happening?

Link: http://clientzone.fifteenten.co.uk/visioncode/html

$('.fadehover').append('<div class="hover"></div>');
$('.fadehover').hover(  
function() {    $(this).children('div.hover').animate({"left": "+=505px"}, 300);}, 
function() {  $(this).children('div.hover').css({left: "-=" + 505});    
});

$('.fadehover a').hover(    
function() {    $(this).children('div.qlink_glow').fadeIn('fast')}, 
function() {  $(this).children('div.qlink_glow').fadeOut('fast');    
});

Any assistance would be hugely appreciated I'm so confused... I've had this happen on other hover effects too

Upvotes: 0

Views: 1570

Answers (2)

Garrin
Garrin

Reputation: 571

This error occurs on your element if you hover in before your last animation finished. A first attempt to me would be trying if it helps to stop the animation before beginning a new one:

$(this).children('div.qlink_glow').stop(true,true).fadeIn('fast');

I'll have to test it, can't say for sure if this will work, just a possibility you could try.

Upvotes: 0

user2279235
user2279235

Reputation:

Try .stop(true,true) before .animate, .fadeIn and .fadeOut

Upvotes: 1

Related Questions