Question

我正在尝试设置一小部分JS，但我对订单生效有困难。

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

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

如何进行以下操作（将鼠标悬停在容器＆gt;详细信息淡出＆gt;选项切换打开＆gt;鼠标关闭＆gt;选项切换关闭＆gt;详细信息淡入）？

这是我当前的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();
        }
    });
});

Answer 1

----更新----

您只传递.hover 1参数，因此当输入和输入li时会发生这种情况。您可以传递悬停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();
        }
    });
);

尝试将product.find('.image-bottom-controlls').stop().toggle();放在fadeToggle的回调中。这种方式总是在fadeToggle监听器完成后发生。

参考：http://api.jquery.com/fadeToggle/

jQuery多个淡入淡出/切换

1 个答案: