I'm using jQuery to animate a height change on hover().
Upon hover, it'll apply a .hover class, and upon clicking, it'll toggle a .expanded class. It mostly works, with proper animation, but only after the first time. The first time hover will skip the animation entirely.
I'm stumped - here's the offending code:
$('#expandingbox').hover(
/*on mouseenter, if not expanded, add hover class*/
function() {
if (!$(this).hasClass("expanded")) {
$(this).stop(true, true).addClass("hover", "slow");
}},
/*on mouseout, if not expanded, remove hover class*/
function() {
if (!$(this).hasClass("expanded")) {
$(this).stop(true, true).removeClass("hover", "slow");
}
}).click(function() {
$(this).toggleClass("expanded", "slow");
});
I found somewhere that adding $('#expandingbox').trigger('mouseout') will fix this problem, but it didn't work for me. And here's an example reproducing the problem: http://jsfiddle.net/Qc42v/
UPDATE: Submitted a ticket, and it turns out it's a jQuery bug. The same code works with jQuery 1.5 (and the latest version of jQuery UI).
This might be a legit jQuery UI bug. Adding some random class beforehand seems to fix it for me. Check: http://jsfiddle.net/Qc42v/9/
So basically like this:
/*on mouseenter, if not expanded, add hover class*/
function() {
if (!$(this).hasClass("expanded")) {
$(this).addClass("xxx");
$(this).stop(true, true).addClass("hover", "slow");
}},
If this looks too yucky for you, maybe just use the basic animate() function? Someone should definitely file a bug though :{
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With