中添加淡入和淡出效果的鼠標懸停

我使用的Magento 1.7.0.2，我有這樣的代碼：中添加淡入和淡出效果的鼠標懸停

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this-  >stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(275); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(325) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(325) ?>';" />

此代碼更改產品的分類頁面的基本圖像與縮略圖時鼠標移到。過渡是即時的。

我想爲基礎圖像添加淡出效果，並在使用鼠標懸停時爲縮略圖圖像淡化效果。這樣我就可以在圖像之間創建一個很好的過渡效果。

我想這個jQuery代碼，但沒有工作：

function fadeOut(element, src){ 
element.fadeIn('slow', function() { 
     this.attr("src", src); 
     });}

與

onmouseover="fadeOut(this, 'http://imagesource.jpg')"

來源

2013-08-28 Alex

什麼是你嘗試過，但沒有工作的jQuery代碼？修改起來可能比從頭開始制定解決方案更有效率......你也可能從錯誤的地方學到了一些東西。 –

也請分享生成的html而不是magento代碼 –

你應該更好地利用CSS的不透明性和過渡這個屬性。在你的JavaScript你只需要改變你的元素的類。

的轉變將是平滑尤其是在移動設備上

來源

2013-08-28 16:42:41 arlg

$(".yourclass").mouseover(function(){ 
$(".classthatfadesout").fadeOut(); 
$(".classthatfadesin").fadeIn(); 
});

來源

2013-08-28 15:59:03 Vladimir

的onmouseover代替你確定你傳遞一個jQuery對象到您的fadeOut功能？

記住$保留爲原型，所以你需要使用jQuery.noConflict()和jQuery('.element')

來源

2013-08-28 16:38:18

這是非常複雜的JavaScript或jQuery來創造我想要的東西。所以我修改了php代碼並添加了一些css。完美的作品。

所以實際上，而不是使用一張圖片和鼠標懸停時更改源我使用了2張圖片，一個在另一個之後，和一些CSS效果。

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"> 
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(325); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /> 

<?php if ($this->helper('catalog/image')): ?> 
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(325); ?>" width="325" height="488" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'thumbnail'), null, true) ?>" class="thumb" /> 
<?php endif; ?>

和CSS是：

.thumb {position: absolute;top: 0;left: 0;opacity: 0;filter: alpha(opacity=0);} 
a:hover > .thumb {display:block} 

.product-image .thumb { 
    transition:   opacity 700ms ease-in-out; 
    -moz-transition: opacity 700ms ease-in-out; 
    -webkit-transition: opacity 700ms ease-in-out; 
    -o-transition:  opacity 700ms ease-in-out;} 

.product-image .thumb:hover { opacity:0.85; filter:alpha(opacity=85); } 

.products-grid .product-image .thumb:hover { opacity:1; }

來源

2013-08-29 13:26:19 Alex

中添加淡入和淡出效果的鼠標懸停

回答

相關問題