Re: [jQuery] problem in slider effect
First of all a little advice, it's probably better to use jQuery's event management than placing onMouseOver or onMouseOut in your html. Here's how to do it :
jQuery(function($) {
$('.opener').mouseover( function() { $("#test").slideDown("slow"); } );
$('#test').mouseout( function() { $("#test").slideUp("slow"); } );
});$('#test').mouseout( function() { $("#test").slideUp("slow"); } );
And a little change in the html to locate the opener link :
<div class="opener" style="width:90px; border:1px solid">Click me!</div>
<div id="test" style="display:none"> ... </div>
The benefits are it's not intrusive so you can pack your JavaScript code in a .js file which is cleaner, plus you can pack the inline style in a css attached to the "opener" class.
Now for your actual problem here, unless you order otherwise, animations pile up on top of one another in the animation queue of an element and get executed in that order, one by one. So here's what I think happen :
- you hover on the link, the slideDown starts
- you move your mouse and hover just a little on the sliding div while it's sliding, you don't necessarilly notice it but your browser does and stacks the slideUp on top of the queue
- the slideDown completes, the next animation is starts, and it's the slideUp you just piled on top
jQuery(function($) {
$('.opener').mouseover( function() { $("#test").stop(true).slideDown("slow"); } );
$('#test').mouseout( function() { $("#test").stop(true).slideUp("slow"); } );
});$('#test').mouseout( function() { $("#test").stop(true).slideUp("slow"); } );
Now, I don't know exactly what effect you're really after, but if I were you maybe I wouldn't trigger the slideUp on exiting the text zone itself, but a parent common to both your hovered link and the text zone, like this :
jQuery(function($) {
$('#test').parent().hover(
});function() { $("#test").stop(true).slideDown("slow"); },
function() { $("#test").stop(true).slideUp("slow"); } );
And the html :
<div>
Hover me !
<div id="test" style="display:none"> ... </div>
</div><div id="test" style="display:none"> ... </div>
This way, as long as you don't exit the container, #test is shown, as soon as you exit the whole of it it's hidden.
Michel Belleville
2009/11/24 swetha <prakashstar42@gmail.com>
Hi,
I am new to jQuery and I have a doubt in slider effect. I just wanted
to replace js with jQuery in my website.
I have a dropdown link in my site, for that i am using slideDown,
slideUp effects. I need slideDown for onMouseOver and slideUp for
onMouseOut. I gave slideDown link to the text and slideUp to the
dropdown div which shows on slidedown effect.
When I mouse over the link, the drop-down shows properly but, when I
move the mouse over the dropdown div, its getting closed. Actually I
need to close it only when I move out of the dropdown div.
Here is my code.
---------------------------
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
function divopen()
{
jQuery("#test").slideDown("slow");
}
function divhide()
{
jQuery("#test").slideUp("slow");
}
</script>
<style>
div#test { background:#F7F7F7; top:54px; left:1px; width:200px;
border:1px solid green; float:left; }
</style>
</head>
<body>
<div onMouseOver="divopen();" style="width:90px; border:1px
solid">Click me!</div>
<div id="test" onMouseOut="divhide();" style="display:none">
The minified versions, while having a larger file size
<p>The minified versions, while having a larger file size than the
packed versions</p>
<p>The minified versions, while having a larger file size than the
packed versions</p>
<p>The minified versions, while having a larger file size than the
packed versions</p>
<p>The minified versions, while having a larger file size than the
packed versions</p>
<p>The minified versions, while having a larger file size than the
packed versions</p>
</div>
</body>
</html>
Please help me to fix the issue...
Thanks,
Prakash
posted by twitter @ 7:13 AM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home