Question

我使用的是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

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

Answer 1

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

特别是在移动设备上，过渡会更顺畅

Answer 2

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

Answer 3

您确定要将jQuery对象传递到fadeOut函数吗？

请注意，$是为原型保留的，因此您需要使用jQuery.noConflict()和jQuery('.element')

Answer 4

使用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; }

为鼠标悬停添加淡入和淡出效果

4 个答案: