Question

There have been multiple questions regarding this topic but I have never really settled on a solid answer. I have also tried various different ways and never found really the best solution.

In my situation, I have a bunch of flags I need to place in the header of my page. Each flag is a PNG, and I have also rendered out black and white versions of them. I want to add a simple CSS class to (either a DIV or an IMG, or something!) and have a small peice of jquery that will fade to the color image when I hover over it, and fade out when I am not hovering over it.

I dont want to do it with CSS because thats boring. Jquery is the way forward I feel, and it will look alot more classy.

Please help, I want the smallest most efficient code possible, without layers upon layers of CSS or a huge .JS include file.

Thanks,

Richard

Answer 1

something like this maybe:

<div class="flag" style="background-image:url(bw.png)"><img src="incolor.png" style="display:none;"></div>

<script>
$(document).ready(function() {
    $('.flag').hover(function() {
        $(this).find('img').stop().fadeIn('fast');
    }, function() {
        $(this).find('img').stop().fadeOut('fast');
    });
});
</script>