Javascript 为鼠标盖添加淡入淡出效果

我正在使用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) ?>';" />

并用

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

---

您确定要将jQuery对象传递到

fadeOut

函数中吗

---

请记住，

$

是为原型保留的，因此您需要使用

jQuery.noConflict（）

和

jQuery（'.element'）

您最好使用CSS不透明性并转换此属性。 在javascript中，您只需更改元素的类

---

过渡会更加顺利，尤其是在移动设备上

使用javascript或jquery创建我想要的东西非常复杂。所以我修改了php代码并添加了一些css。工作完美

所以实际上，当我使用两张图片，一张在另一张后面，以及一些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; ?>

---

您尝试过但不起作用的jQuery代码是什么？修改可能比从头制定解决方案更有效。。。您可能还从错误的地方学到了一些东西。另外，请共享生成的html而不是magento代码

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

<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; ?>

.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; }