Gradually changing color
How does the logo in the top left corner of the screen gradually change color as a rollover? I think its done in jquery. If you don't know the code can you point me to a tutorial that can? Thanks.
http:开发者_高级运维//www.shopdev.co.uk/blog/
UPDATE: Thanks everyone, I've posted a working version of the code below,
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 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');
});
});
</script>
<style type="text/css">
#logo span{
background: url(logo2.gif) no-repeat scroll center bottom;
width:257px;
height:75px;
position:absolute;
}
img{
border:0;
}
</style>
</head>
<body>
<div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>
</body>
</html>
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! //
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.
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)
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
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
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" />
加载中,请稍侯......
精彩评论