Using the jQuery hoverFlow or hoverIntent plugin to animate fadeIn/fadeOut

I've tried addressing this problem in several different ways and so far have not found a solution that works as it should. I want to animate .fadeIn and .fadeOut with the following conditions:

1) gradually fade in text and image (located within a span) on mouseover

2) complete fadeIn animation before progressing to next animation

3) on mouseleave, gradually fade out text and image

4) complete fadeOut animation before progressing to next animation

5) animations should run smoothly and shouldn't queue

Here's what I have so far:

$(document).ready(function() {

$("a").mouseover(function () { 
$("span.imtx").dequeue().fadeIn(3000, "swing", " ");
});

$("a").mouseleave(function () { 
$("span.imtx").fadeOut(3000, "swing", " ");
}); 
});

So far the above code has come closest to what I want, so I'm sticking with that if at all possible, save any minor changes. That said, the fades sometimes happen and sometimes don't. It can also get jittery with numerous mouseovers and mouseleaves. I'm using FF 6.0 for development, but also need this to work in all major browsers (FF6, IE8, Google Chrome). I've only been working with jQuery/JavaScript for a month, so pl开发者_Go百科ease take that into consideration when answering. It's not at all an intuitive language for me, but I've been learning as I go.

Okay, now for the question, or rather, the plea for help: I want to incorporate either Ralf Stoltze's hoverFlow plugin or Brian Cherne's hoverIntent plugin to help the fadeIn and fadeOut animations perform properly. I'd post my attempts, but none have worked thus far. Is anyone here familiar with either of these plugins and can you help me to get them working with the code above?

When you use fadeIn or fadeOut, it's essentially changing the display property, hence if it has not finished one vs other and you execute second effect, object will no longer have appropriate properties jQuery needs to run the effect, so, either decrease the time and/or add stop() instead of dequeue() and if you like try this http://jsfiddle.net/yAupq/ i am using fadeTo which will not break even if your mouse enters and leaves abruptly and repeatedly on and off. Effect will continue on for current event, starting from last state, and will not add to queue all the times mouse entered or left the object and run those effects one after the other...