I think what is happening here is you are binding the mouseover and mouseout
functions to the #navigation <div>, so when your mouse passes over the <ul>
and <li> elements inside it, the mouseout function is triggered (the mouse
moves out as far as the <div> is concerned, and over its child elements).
You need to be more specific and target the elements within the #navigation
<div> you are looking for, by giving them a class. If you give the <li>
elements the class, you will end up with the same problem when it comes to
nested lists, so target the   and elements of the top level menu items.

One other thing is that fadeTo forms a queue so if you frantically move the
mouse about over the elements, you will see the results in the form of
"ghosting" for a while afterwards - not sure how you would correct this.


msm.stef wrote:
> 
> 
> Hello,
> 
> I still have problem.
> Here my page for  example: http://msmfarcry02.free.fr/test/menu_demo.html
> 
> When mouse over, function over/out work continuously.
> When drag, same.
> 
> here is the script : http://msmfarcry02.free.fr/test/jscript.js
> and the css: http://msmfarcry02.free.fr/test/presentation.css
> 
> Many thanks for your help
> 
> 
> Stephan
> 
> On 11 juin, 05:48, "Richard D. Worth" <[EMAIL PROTECTED]> wrote:
>> Here's a way to do with bind/unbind:
>>
>> function over() { $(this).fadeTo("slow", 1.0); }
>> function out() { $(this).fadeTo("slow", 0.6); }
>>
>> function unBind() {
>>   $("#navigation").unbind("mouseover", over).unbind("mouseout", out);}
>>
>> function reBind() {
>>   $("#navigation").bind("mouseover", over).bind("mouseout", out);
>>
>> }
>>
>> reBind();
>>
>> $("#navigation").draggable({ start: unBind, stop: reBind });
>>
>> In this case you want to use the start callback, not the drag callback as
>> drag is called continuously (for each mousemove) during the drag.
>>
>> - Richard
>>
>> On Tue, Jun 10, 2008 at 10:52 AM, msm.stef <[EMAIL PROTECTED]> wrote:
>>
>> > Thank for this, but it doesnt works.
>>
>> > I try to use this :
>>
>> >        $("#navigation").hover(function () {
>> >           $(this).fadeTo("slow", 1.0);
>> >           },function(){
>> >           $(this).fadeTo("slow", 0.6);
>> >        });
>>
>> >         $("#navigation").draggable({
>> >        drag: function() { $(this).unbind("hover"); },
>> >        stop: function() { $(this).bind("hover"); }
>> >        });
>>
>> > but, not good !!!
>>
>> > Have you a solution for me ?
>> > Thanks
>>
>> > Stephan
> 
> 

-- 
View this message in context: 
http://www.nabble.com/Draggable-and-Fadeto-tp17752714s27240p17776225.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to