Hi Martin, The main cause of the problem is you're using the e.target as the starting selector on the effect. So when the mouseout event occurs the event's target can be different from what you're expecting.
So the initial fix is to change $(e.target)... to $(this)... However, using the .stop() is also causing a bug - so I've removed it from the demo I put together: http://jsbin.com/aseno/edit Regards, Remy. On Oct 12, 9:08 pm, Martin <[EMAIL PROTECTED]> wrote: > Hi, I'm a jquery beginner and have problems creating a simple (?) > effect on my page. I have the following markup: > <div class="panel"> > <div class="panelTitle">title</div> > <div class="panelContent">content...</div> > </div> > > What I'd like to achieve, is that the panel content should be shown > when the mouse is moved over the panel DIV and then hidden again when > the mouse is moved away. > > My current solution looks like this: > > $(document).ready(function() { > $('.panel').hover(function(e) { > $(e.target).children('.panelContent').stop().slideDown('slow'); > }, function(e) { > $(e.target).children('.panelContent').stop().slideUp('slow'); > }); > > } > > This code basically works, but very unreliably. I especially have > problems when the mouse pointer is moved fast, e.g. when the mouse > leaves the panel DIV before the content was fully shown. > I have also tried binding the mouseenter and mouseleave events, but > the results were the same. > > A full sample can be viewed here:http://jsbin.com/afuwa > To view/edit the source code use the URL :http://jsbin.com/afuwa/edit > > Can anyone give me some hints, pointers to documentation, etc. how to > implement something like I'm trying to achieve? > > Thanks a lot. > > -- > Martin
