Change Element Visibility Upon Page Load
Alright, for those of you who have seen the new Google Page, I am attempting to get a similar idea going on my own webpage. Basically, I want the image in the middle to fade in upon a mouse moving on the screen. Here is the URL:
http://mageia.rh.rit.edu/
This is the Jquery I am using to get most of the affect: http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
However, as you might be able to tell, the image loads and then fades out. What I would like to have happen is for t开发者_如何学编程he image to not be seen at all until you move your mouse, just like on the Google webpage. I was thinking of perhaps changing the image's visibility by javascipt and CSS, but I'm not sure how to go about that. Ideas would be appreciated!
CSS:
div.fade_in { display: none; }
You can make it fade in on page load:
$(function() {
$("div.fade_in").fadeIn();
});
If you want to wait for the mouse to move:
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$("html").mousemove(fade_in);
Edit: tested in IE8 (compatibility mode), FF3.5 and Chrome 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://mageia.rh.rit.edu//resources/main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function fade_in() {
$("div.fade_in").fadeIn();
$("html").unbind("mousemove", fade_in);
}
$(function() {
$("html").mousemove(fade_in);
});
</script>
<style type="text/css">
div.fade_in { display: none; }
</style>
</head>
<body>
<h1 class="centertext">Welcome to Mageia</h1>
<h3 class="centertext">The Works of Genii</h3>
<div id = "container" class="fade_in" >
<img class="image1" src="http://mageia.rh.rit.edu/resources/Escher.gif" />
</body>
</html>
For the CSS:
imageID{opacity:0.0;filter:alpha(opacity=00)}
This ensures that the image isn't shown until the JS is loaded.
For the Javascript:
$(document).ready(function(){
$("imageID").fadeIn("slow"3);
});
This changes the opacity from 0 to 1.
Cheers!
加载中,请稍侯......
精彩评论