jQuery多個淡入淡出/切換

Question

我想安裝一小塊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(); 
     } 
    }); 
}); 

Answer 1

---- ----更新

你只有經過.hover 1參數，因此當進入和離開的李發生這種情況。您可以傳遞懸停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/