Jquery fadeToggle不起作用

Question

當我將圖像懸停時，我需要淡入淡出某些類。我正在使用Opencart。
這裏是它如何工作http://imgur.com/TzgDHz2
正如你可以看到它的工作原理，但是當我點擊到列表或電網（右上）的效果是行不通的。
jQuery代碼：

$(document).ready(function(){ 
$(".image").hover(function(){ 
    $(".wishlist, .compare").fadeToggle(); 
}); 
}); 

HTML代碼：

<div class="image">  
    <a href="<?php echo $product['href']; ?>"> 
    <img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /> 
    </a> 
    <div class="wishlist" style="display: none;"style="display: none;"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><i class="ebenicon ebenicon-plus-square"></i><?php echo $button_wishlist; ?></a></div> 
    <div class="compare" style="display: none;"> 
    <a onclick="addToCompare('<?php echo $product['product_id']; ?>');"> 
    <i class="ebenicon ebenicon-plus-square"></i><?php echo $button_compare; ?></a></div> 
    </div> 

Answer 1

只是胡亂猜測，但我相信你想有你的形象 '淡出'，當你徘徊？

你是否一定想使用jQuery，因爲我可以想象你可以簡單地使用CSS。雖然，我在代碼中看不到任何問題。無論如何，請嘗試下面的這些示例之一。

.image:hover > .wishlist, .image:hover > .compare { 
    filter: alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 

如果你真的想使用jQuery，試試這個。

$(".image").mouseOver(function() { 
    $(this).find(".compare").fadeTo("slow" , 0.5, function() { 
    $(this).find(".wishlist").fadeTo("slow" , 0.5, function() { 
    // fading complete. 
    }); 
}); 
$(".image").mouseOut(function() { 
    $(this).find(".compare").fadeTo("fast" , 1.0, function() { 
    $(this).find(".wishlist").fadeTo("fast" , 1.0, function() { 
    // back to normal. 
    }); 
}); 

糾正我，如果我錯了，但是這應該淡化.wishlist和.compare至50％的不透明度。

Answer 2

的原因是，當你在List/Grid在category.tpl

所以在這個函數你有if else條件塊爲list or grid視圖中單擊一些HTML再生（替代）由js函數display()圍繞線112，所以它再生一些HTML包括compare and wishlist div大約管線119和183，所以你需要添加style="display:none"還有

改變這種（在if和else）

html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>'; 
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>'; 

到

html += '<div style="display:none" class="wishlist">' + $(element).find('.wishlist').html() + '</div>'; 
html += '<div style="display:none" class="compare">' + $(element).find('.compare').html() + '</div>'; 

也就是爲什麼你在wishlist格加入style="display:none"兩次？

- 編輯

多了一個錯誤，使hover動態創建的元素，你必須有點不同使用它，也hover不贊成這樣使用on這樣

$(document).ready(function(){ 
$(document).on('hover','.image',function(){ 
    $(".wishlist, .compare").fadeToggle(); 
}); 
}); 

參考： jQuery .on function for future elements, as .live is deprecated