0

我正在尝试设置一小段 JS，但我在事情生效的顺序上遇到了问题。

当我将鼠标悬停在图像上时，详细信息块需要淡出，然后带有图标选项的第二个块淡入。

目前细节块淡出，选项块被打开，这很好。但是，当我关闭鼠标时，详细信息块的淡入发生在关闭选项之前。

如何使以下情况发生（将鼠标悬停在容器上>详细信息淡出>选项打开>鼠标关闭>选项关闭>详细信息淡入）？

这是我当前的 javascript 几乎就在那里。

$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();
        }
    });
});
4

1 回答 1

1

- - 更新 - -

您只传递 .hover 1 参数，因此当输入和离开 li 时会发生这种情况。您可以传递 hover 2 个函数，mouseIn 和 mouseOut。

所以试试：

$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/

于 2013-02-25T11:37:02.547 回答