ansaurus

Question

Answer 1

+8 A:

Did you try looking at the source code to the page? It's an opacity change.

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

So an image over another image, with the front one fading in and out gradually. NOT a color change.

Note the warning above the code:

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //

Nosredna 2009-11-17 17:22:01

"An image over another image". Not quite, a span is not an image ;)

Crescent Fresh 2009-11-17 17:26:53

It's an image, just not an img. :-)

Nosredna 2009-11-17 17:34:05

Firefox and Firebug are the best way to see it, btw. You can actually watch the HTML change as you mouse over.

Dave Swersky 2009-11-17 17:35:43

That copyright notice is pretty funny.

chelmertz 2009-11-17 17:46:41

It's not even a proper copyright notice.

Nosredna 2009-11-17 17:54:11

Answer 2

A:

Right click on the page and hit "View Source". Your answer is in the the JavaScript block in the first 40 lines of the file. (Your jQuery assumption is correct)

Josh Wright 2009-11-17 17:22:03

Answer 3

A:

it has two logo images. one blue one red. red is shown by default. logo image has a sibling span and its background image is the blue logo. span has an opacity of 0. when mouse over the span's opacity is gradually change to 1

Funky Dude 2009-11-17 17:22:25

Answer 4

+1 A:

Set the blue image as the background of the div. Add the red image in the div as a normal image so that it covers the background image. You can place it in a span. On hover, you then change the opacity of the red image so that the blue image shows through. This is easy to animate in jQuery. On mouseout, do the oposite.

Vincent Ramdhanie 2009-11-17 17:23:43

Answer 5

A:

Probably two images that are "faded" with css opacity. When one is maximum opacity the other has minimum. The transition is made my increasing one opacity and lowering another

Victor Hurdugaci 2009-11-17 17:24:33

Answer 6

A:

Nosredna is correct but if you want something simpler that you can use yourself without getting attacked for plagiarism;

First you will need a 24-bit PNG or a gif image with a transparent part - the example has transparent liquid.

make sure you include jquery, jquery-ui (becasue it adds CSS background color animation) and your image hover effect

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){

        $("#logo")
            .css({"backgroundColor: "#fff"})
            .hover(function() {
               $(this).stop().animate({backgroundColor: "#f00"}, 'slow');
            }, function() {
               $(this).stop().animate({backgroundColor: "#fff"}, 'slow');
            });

    });
</script>

then in the body drop in your image with the correct ID

<img src="mylogo.png" id="logo" width="100" height="100" />

Matt Smith 2009-11-17 17:53:08

Does that work in IE6?

Nosredna 2009-11-17 18:43:16

Never tested it with a PNG applied as a Filter in IE6 - my guess is no? but if you use a GIF, my test did.

Matt Smith 2009-11-17 21:37:55

ansaurus

tags:

views:

answers:

Gradually changing color

related questions