URL: http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
demo: http://www.hv-designs.co.uk/tutorials/jquery/all.html
jQuery Fade In.Fade Out fades an element to 30% on the landing page and when you hover over it, it fades to 100%. The effect can be assigned to any element in a website, such as image, text, a link or even a div. As the whole HTML file is loaded, then the javascript will run.
The effect for the individual images will a class of "class="latest_img", that is defined in the .CSS file. While the text within my HTML document is in P tags within a div so if i apply the effect to the p tag within a certain div you get the effect above. You can also apply the effect to a whole div, which means everything in that div will fade even the div itself.
Give a try and attach this the fade in fade out effect in your designs, or bookmark this jQuery Fade In.Fade Out article for future need!
Incoming search terms:
- jquery fade in fade out
- jquery fade div
- fade in fade out jquery
- jquery fade in div
- jquery fadein div
- jquery fadein fadeout
- fade div jquery
- jquery fadein element
- fade in div jquery
- jquery fade out fade in
- jquery div fade
- jquery fade element
2 Responses to “Fades an element using jQuery Fade In.Fade Out” Leave a reply ›
Your version queues animations. To fix this put a .stop() in both poritions of the hover.
$("#text p").hover(function(){
$(this).stop().fadeTo("slow", 1.0);
},function(){
$(this).stop()fadeTo("slow", 0.3);
});
This should stop the hover animations from queuing up if someone hovers of an animated section repeatedly.