jQuery Text Update & Fade

Hi guys….. I’m having an issue with some text I’m trying to get to fade out, update itself and then fade in again. That’s easy to do and I’ve got the code for that down, but the trigger that makes it update itself is based on mouseenter, and it needs to fade out on mouseleave.

Here’s what I’ve got so far.

$('#myElement').live("mouseenter", function(event) {
    $(this).unbind('mouseenter');
    var settingID = $(this).find('input, select').attr('id');
    var settingInfo = "#settingInfo-"+settingID;
    var settingText = $(settingInfo).find('p').text();
    $('.settingInfo').fadeOut(100, function() {
        $(settingInfo).fadeIn(100, function() {
            $('#myElement').mouseleave(function(event) {
                $(settingInfo).fadeOut(100);
                $(this).unbind('mouseleave');
            });
        });
    });
});

I have a group of several boxes (myElement). When the user moves their mouse over an element, the text (settingInfo) needs to update itself with a nice fade. I’ve got this working for the most part when the user moves their mouse over an element, then back off again. But not when the user moves their mouse over an element, then quickly to another element.

Any suggestions on making this work?

Thanks in advance! Alex

it’s because by default jQuery finishes the previous animation before it does the new one (it queues up all animation sequences). you can overwrite this default behavior by calling the “stop” method on the jQuery object like this:

jQuery(’#element’).stop(true, true);

you can then call on the ‘fadeIn/Out’ methods like this:

jQuery(’#element’).stop(true, true).fadeOut(100).fadeIn(100);

something like that… and you might want to improve your code a little.

hope that helps.

Ah, that .stop() function worked! Thanks!