Take a look at this.. http://www.pirolab.it/piro_09/slide.html
<!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 --- Mar 30/9/08, yo2lux <[EMAIL PROTECTED]> ha scritto: Da: yo2lux <[EMAIL PROTECTED]> 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 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 :) On Sep 30, 3:19 pm, diego valobra <[EMAIL PROTECTED]> wrote: > i had to change the css, actually does'nt work with ie.... > now works and is: > <!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 > height: '0px' // i use width to set the slide div at 0px > }, 1500); > $('#'+ slide).queue(function(){ //an then after the event it's done i set by the queue function the div opacity at 0 > $('#'+ slide).css('opacity',0) > $('#'+ slide).dequeue(); > }); > }, > function() { > var slide = $(this).attr('title'); > $('#'+ slide).stop().animate({ //and to bring back the div at the mouseOut just give it the width:100px...that's it :) > height: '30px' > },1000); > $('#'+ slide).css('opacity',1) // i set the opacity at 1 > });}); > > </script> > <style> > #headernav { background: yellow url('images/navbg.gif') repeat-x; height: 30px; width:90%; } > #headernav ul li { padding:0px; height:30px; text-align:center; line-height: 29px; display: inline; float: left; margin: 0px; } > #headernav ul li span { background-color: green; width:120px; display: block; height:30px; position:relative; margin-left:0px; margin-top:-30px; z-index:999 } > #headernav ul li a { padding:0px; font-weight: bold; width:120px; height:30px; display:block; font-family: tahoma, arial; color: #fff; position:relative; z-index:1000 } > #headernav ul li a:hover { padding:0px; font-weight: bold;height:30px; display:block; font-family: tahoma, arial; color: #000; 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> > > Ciao > > --- Mar 30/9/08, diego valobra <[EMAIL PROTECTED]> ha scritto: > Da: diego valobra <[EMAIL PROTECTED]> > Oggetto: [jQuery] R: [jQuery] Re: Show image gradually > A: jquery-en@googlegroups.com > Data: Martedì 30 settembre 2008, 14:07 > > Hi there, > I made some changes to the script, and now is: > > <!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 > height: '1px' // i use width to set the slide div at 0px > }, 1500); > $('#'+ slide).queue(function(){ //an then after the event it's done i set by the queue function the div opacity at 0 > $('#'+ slide).css('opacity',0) > $('#'+ slide).dequeue(); > }); > }, > function() { > var slide = $(this).attr('title'); > $('#'+ slide).stop().animate({ //and to bring back the div at the mouseOut just give it the width:100px...that's it :) > > height: '30px' > },1000); > $('#'+ slide).css('opacity',1) // i set the opacity at 1 > });}); > > </script> > <style> > #headernav { background: yellow url('images/navbg.gif') repeat-x; height: 30px; } > #headernav ul li { padding: 0px 2px 0px 0px; line-height: 29px; display: inline; float: left; margin: 0px; } > #headernav ul li span { background-color: green; padding: 0px 2px 0px 0px; line-height: 29px; display: block; width:100%; height:30px; position:relative; margin-left:0px; margin-top:-30px; z-index:999 } > #headernav ul li a { padding: 9px 25px 8px 25px; font-weight: bold; font-family: tahoma, arial; color: #fff; position:relative; z-index:1000 } > #headernav ul li a:hover { padding: 9px 25px 8px 25px; font-weight: bold; font-family: tahoma, arial; color: #000; 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> > > then you give at the href the title you want, and the span must have the corrispective id.. > that's it :) > hope it works..http://www.pirolab.it/piro_09/slide.html > > Diego > > --- Mar 30/9/08, yo2lux > <[EMAIL PROTECTED]> ha scritto: > Da: yo2lux <[EMAIL PROTECTED]> > Oggetto: [jQuery] Re: Show image gradually > A: "jQuery (English)" <jquery-en@googlegroups.com> > Data: Martedì 30 settembre 2008, 11:25 > > Hi, > Thanks for your help! The code is amazing, but I have some issue: > > 1. Please visit this page:http://progra.ro/zoliky/slide2.htmland put > the mouse on link, don't move the mouse until slide is finished! > > 2. The mouse pointer change to finger and normal pointer like a loop. > Is possible to solve this issue ? > > Thanks! > > On Sep 30, 2:49 am, "diego valobra" <[EMAIL PROTECTED]> > wrote:> Hi, you can try this code, > > > <!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 > > $('.parent').hover(function () { //start the hover > function > > $('.parent>div').stop().animate({ // stop animate > function, so it > > does'nt repet over and over > > width: '0px' // i use 'width' to set the > slide div at 0px > > }, 1000); > > $('.parent>div').queue(function(){ // an then > > after the event it's> done i set by the queue function the div opacity at 0 > > > > $('.parent>div').css('opacity',0) > > > $('.parent>div').dequeue(); > > }); > > }, > > function() { > > $('.parent>div').stop().animate({ //and to bring back > the div at the > > mouseOut just give it the width:100px...that's it :) > > width: '100px' > > },1000); > > $('.parent>div').css('opacity',1) // i set the > opacity at 1 > > });}); > > > </script> > > <style> > > .parent { width:100px; height: 80px; } > > .image { margin: 0px; width: 100px; height: 80px; background: green; > > border: 1px solid black; position: relative; } > > </style> > > > </head> > > <body> > > > > <div class="parent"> > > > <div class="image"></div> > > </div> > > </body> > > </html> > > > here is a demo,hope it works :) http://www.pirolab.it/piro_09/slide.html > > > regards > > > Diego > > > 2008/9/30 ricardobeat <[EMAIL PROTECTED]> > > > > Hmm, the mouseover event still fires for the child element... > > > > Do this: > > > > <div class="parent"></div> > > > <div style="display: block;" > > class="image"></div> > > > > <style> > > > .parent { position:absolute; z-index:5 } > > > </style> > > > > with the same script. Putting one element on top of the other > prevents > > > the onmouseover event from being repeatedly fired. > > > > On Sep 29, 6:55 > > pm, yo2lux <[EMAIL PROTECTED]> wrote: > > > > > I use your code and I have the same problem.. > > > > Check your code:http://progra.ro/zoliky/index.html > > > > > On Sep 29, 11:37 pm, ricardobeat <[EMAIL PROTECTED]> > wrote: > > > > > > yo2lux, > > > > > > When you "hide" the box with > > > > > > $('.image').hide("slide", { direction: > "left" }, 1000); > > > > > > The user is leaving the box, because it is hidden! > > > > > Then the "unhide" animation triggers because the > user has left the > > > > > box: > > > > > > $('.image').show("slide", { direction: > "left" }, 1000); > > > > > > When this happens, the box slides under the mouse cursor > and the user > > > > > is "entering" the box again, so you go back to > the first "hide" > > > > animation, and this keeps repeating over and over. > > > > > > The code I posted earlier should work for this purpose. > > > > > > On Sep 29, 12:36 pm,yo2lux<[EMAIL PROTECTED]> wrote: > > > > > > > For Richard D. Worth message: > > > > > > ^ > > > > > > Yes if user puts the mouse over the box, I want to > hide the box > > > > > > (animated with slide effect) and don't show the > > box anymore. Now, if> > > > > user leave the box, I want to show the box. > > > > > > > I want to use this for menu, something > > likehttp://www.antena1.ro/> > > > > header menu. > > > > > > > This is my jQuery > > code:http://progra.ro/zoliky/index.htmlanddon't<http://progra.ro/zoliky/index.htmlanddon%27t>> > > > > work good for me. Please put the > > mouse over the box > and don't leave > > > > > > > the box. The box every time appear and disappear. I > don't know why. > > > > > > Any idea how to solve this problem ? > > > > > > > Thanks! > > > > > > > On Sep 20, 9:37 pm, ricardobeat > <[EMAIL PROTECTED]> wrote: > > > > > > > > It is not a loop per se, you're effectively > hovering again > > > everytime > > ... > > read more » Scopri il blog di Yahoo! Mail: Trucchi, novità e la tua opinione. http://www.ymailblogit.com/blog
