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
>
