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
