0

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

4 回答 4

1

您应该更好地使用 CSS opacity 并转换此属性。在您的 javascript 中，您只需更改元素的类。

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

于 2013-08-28T16:42:41.163 回答
0 
$(".yourclass").mouseover(function(){
$(".classthatfadesout").fadeOut();
$(".classthatfadesin").fadeIn();
});
于 2013-08-28T15:59:03.093 回答
0

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

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

于 2013-08-28T16:38:18.860 回答
0

使用 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-29T13:26:19.323 回答