[jQuery] Show image gradually
<table cellspacing="0" cellpadding="0" border="0" ><tr><td valign="top" style="font: inherit;">
Take a look at this.. <a href="http://www.pirolab.it/piro_09/slide.html">http://www.pirolab.it/piro_09/slide.html</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //no slide effects added just pure jQuery
$('#headernav ul li a').hover(function () { //start the hover function
var slide = $(this).attr('title'); //a var that takes the attr title and change it in id value..'#'+slide means: #one or #two or #three
$('#'+ slide).stop().animate({
//i stop animate function, so it does'nt repet over and over
marginTop: '-30px' // i use marginTop to set the slide div going up
}, 400);
},
function() {
var slide = $(this).attr('title');
$('#'+ slide).stop().animate({ //and to bring back the div at the mouseOut just give it the marginTop :'0'...that's it :)
marginTop: '0px'
},600);
});
});
//if you take a look at the css you'll see that i've changed #headernav ul li, adding overflow:hidden.. so the span it' invisible :)
</script>
<style>
#headernav { background: yellow url('images/navbg.gif') repeat-x; height: 30px; width:90%;
}
#headernav ul li { overflow:hidden; padding:0px; height:30px; text-align:center; line-height: 29px; display: inline; float: left; margin: 0px; }
#headernav ul li span { background-color: green; border-bottom:0px solid green; width:120px; display: block; height:30px; position:relative; margin-left:0px; margin-top:0px; z-index:999 }
#headernav ul li a { padding:0px; font-weight: bold; width:120px; height:30px; display:block; font-family: tahoma, arial; color: #000; position:relative; z-index:1000 }
#headernav ul li a:hover { padding:0px; font-weight: bold;height:30px; display:block; font-family: tahoma, arial; color: #fff; position:relative; z-index:1001 }
</style>
</head>
<body>
<div id="headernav">
<ul id="navlist">
<li><a href="/" title="one">Home</a><span
id="one"></span></li>
<li><a href="/support" title="two">Support</a><span id="two"></span></li>
<li><a href="/contact" title="three">Contact</a><span id="three"></span></li>
</ul>
</div>
</body>
</html>
Regards
Diego
--- <b>Mar 30/9/08, yo2lux <i><yo2lux@gmail.com></i></b> ha scritto:
<blockquote style="border-left: 2px solid rgb(16, 16, 255); margin-left: 5px; padding-left: 5px;">Da: yo2lux <yo2lux@gmail.com>
Oggetto: [jQuery] Re: R: [jQuery] R: [jQuery] Re: Show image gradually
A: "jQuery (English)" <jquery-en@googlegroups.com>
Data: Martedì 30 settembre 2008, 15:19
<pre>Great! Thanks for your help!
Is possible to change the direction ? Something like this menu :
www.antena1.ro ?
i need to start at bottom and show gradually until
top.
Now the script start at bottom but remove the color until top.. I need
to start at bottom and add the color :)