Image Sparkle Effect - Almost Working
Having some trouble with the loop and fade parts. I have a header logo that has threee png sparkle images layered just above it. I then placed an empty span over the top and sized the width/height to cover my "hover" area.
What I want is when there is a hover event, the 3 sparkle png images fade in/out at different intervals and delays and to repeat this function until mouse out. (like
this but not using css -webkit)
What I have so far is the hover triggering the loop and the fade intervals but I can;t seem to get delay to work and I can't get the loop to stop on exiting the hover event. Also, this eventually crashes the browser if left open and continuing the loop.
- var pause = 5000;
- jQuery('#empty_span').hover(function hoverfade(){
- jQuery('#Sparkle1').fadeOut(2500);jQuery('#Sparkle1').fadeIn(2500);
- jQuery('#Sparkle2').fadeOut(600);jQuery('#Sparkle2').fadeIn(600);
- jQuery('#Sparkle3').fadeOut(1200);jQuery('#Sparkle3').fadeIn(1200);
- interval = setInterval(hoverfade, pause);
- });
- jQuery('#empty_span').dequeue;