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.html and 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 > > > > > > the box slides to the right under your mouse cursor. > > > > > > . > > > > > > What you can do is wrap it in another element that will keep it's > > size > > > > > > and assing the event handler to it. > > > > > > > <html> > > > > > > <head> > > > > > > <script src="http://code.jquery.com/jquery-latest.js"></script> > > > > > > > <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ > > > > > > effects.core.js"></script> > > > > > > <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ > > > > > > effects.slide.js"></script> > > > > > > > <script> > > > > > > $(document).ready(function(){ > > > > > > > $(".parent").hover(function () { > > > > > > $('.image').hide("slide", { direction: "left" }, 1000); > > > > > > }, > > > > > > function() { > > > > > > $('.image').show("slide", { direction: "left" }, 1000); > > > > > > }); > > > > > > > }); > > > > > > </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> > > > > > > > On Sep 20, 3:13 pm, monycau <[EMAIL PROTECTED]> wrote: > > > > > > > > Ok, thanks but is not possible to disable this loop? > > > > > > > > On Sep 20, 8:35 pm, "Richard D. Worth" <[EMAIL PROTECTED]> > > wrote: > > > > > > > > > When you place your mouse over the box it triggers the first > > hover callback > > > > > > > > and animates it to hide. Leaving the mouse over the box while > > it slides out > > > > > > > > of view, the mouseout event will fire, triggering the second > > callback, which > > > > > > > > queues an animation to show it. If your mouse is still in > > position to be > > > > > > > > over it when it slides back, it will mouseover again and you > > get a loop. > > > > > > > > > - Richard > > > > > > > > > On Sat, Sep 20, 2008 at 12:27 PM, monycau <[EMAIL PROTECTED]> > > wrote: > > > > > > > > > > Please check this page: > > > > > > > > >http://progra.ro/zoliky/index.html > > > > > > > > > > and put the mouse on square (leave the mouse on square). Why > > the > > > > > > > > > animation is executed twenty times ? > > > > > > > > > > Please check my html source code. Thanks so much! > > > > > > > > > > On Sep 19, 4:27 pm, "Richard D. Worth" <[EMAIL PROTECTED]> > > wrote: > > > > > > > > > > On Fri, Sep 19, 2008 at 5:43 AM,yo2lux<[EMAIL PROTECTED]> > > wrote: > > > > > > > > > > > > Thanks for your help! > > > > > > > > > > > jQuery UI is a separate plugin ? > > > > > > > > > > > jQuery UI is a sister project of jQuery. It's focused on > > providing a > > > > > > > > > > cohesive set of high quality RIA (Rich Internet > > Application) plugins. > > > > > > > > > > Interaction, Widgets, and Effects. You can find out more at > > > > > > > > > > >http://ui.jquery.com/ > > > > > > > > > > > and > > > > > > > > > > >http://docs.jquery.com/UI/ > > > > > > > > > > > Also, there's a dedicated mailing list for jQuery UI at > > > > > > > > > > >http://groups.google.com/group/jquery-ui > > > > > > > > > > > - Richard Scopri il Blog di Yahoo! Mail: trucchi, novità, consigli... e anche la tua opinione! Scopri il blog di Yahoo! Mail: Trucchi, novità e la tua opinione. http://www.ymailblogit.com/blog