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à e la tua opinione.
http://www.ymailblogit.com/blog
