jQuery多重淡入淡出/切换

Question

I'm trying to setup a small piece of JS and I'm having trouble with the order things take effect.

When I hover over an image, the details block needs to fade out, then a second block with icon options fade in.

Currently the details block fades out, the options block is toggled on, which is fine. However when I mouse off, the fade in for the details block happens before the options is toggled off.

How do I make the following happen (hover over container > Details fadeout > options toggle on > Mouse off > options toggle off > details fade in)?

Here is my current javascript that's almost there.

$j('.category-products li').hover(function(){
    var product = $j(this);

    product.children('.product-bottom-info').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            //this is a multi image product
            product.find('.image-bottom-controlls').stop().toggle();
        }
    });
});

Answer 1

---- Update ----

You are only passing .hover 1 parameter, so this happens when the li is entered AND left. You can pass hover 2 functions, mouseIn and mouseOut.

So try:

$j('.category-products li').hover(function(){
    var product = $j(this);

    product.children('.product-bottom-info').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            //this is a multi image product
            product.find('.image-bottom-controlls').stop().toggle();
        }
    });
}, function() {
    var product = $j(this);

    product.children('.image-bottom-controlls').stop().fadeToggle(700, function(){
        if(product.find('.catalog-image-container').length){  
            product.find('.product-bottom-info').stop().toggle();
        }
    });
);

---

Try putting product.find('.image-bottom-controlls').stop().toggle(); in the callback on the fadeToggle. This way it always happens after the fadeToggle listener finishes.

Ref: http://api.jquery.com/fadeToggle/