Hey guys,
Remy wrote an article about this sort of thing on
jqueryfordesigners.com the other day. In it he shows a couple
approaches that were probably better than mine, but the one he got
from me involved using .fadeTo()
this one uses two images, and it might not directly apply, but the
trick for me was to use .stop().fadeTo('speed', '1.0') -- or '0' -- if
the element is :animated
$(document).ready(function() {
$('div.fade').hide();
$('div.out').hover(function() {
var $fade = $('> .fade',this);
if ($fade.is(':animated')){
$fade.stop().fadeTo(3000, '1.0');
} else {
$fade.fadeIn(3000);
}
}, function() {
var $fade = $('> .fade',this);
if ($fade.is(':animated')){
$fade.stop().fadeTo(3000,'0');
} else {
$fade.fadeOut(3000);
}
});
});
Hope that helps.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 23, 2008, at 2:39 PM, Jörn Zaefferer wrote:
Highmaster schrieb:
Hello Everybody, Hope this is the right spot to place some
suggestions
for the GREAT jQuery Lib.
How is it possible to use the fade() or fadeTo() method, if i want to
toggle the an item e.g. a button with a fade on mouseover.
the problem is, i have to stop the animation if i do a quick toggle
over-out-over..., else the item will fade in and out many times.
i tried all kinds of chaining with stop, unqeue etc.. but the
behavior
isn't controllable.
iwould like to know a solution like
toggleFadeIn: function() {
return this.stop().XXX.fadeIn();
},
toggleFadeOut: function() {
return this.stop().XXX.fadeOut();
},
you get the idea?
I'm trying to tackle exactly that problem within my tooltip plugin
(and a derivate of that): http://dev.jquery.com/view/trunk/plugins/tooltip/
You can see the current state here, check the tooltips below "The
next four links have no delay with tracking, with extra content:": http://dev.jquery.com/view/trunk/plugins/tooltip/demo/
It breaks when hovering over those links fast, stopping above one of
them: Either no tooltip is visible, or only with a very low opacity.
It still may help you to take a look at the show and hide functions
of the plugin: http://dev.jquery.com/view/trunk/plugins/tooltip/jquery.tooltip.js
Let me know if you make any progress, I'll let you know if I find
something.
Jörn
