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.htmland don't
> 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
