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

【问题标题】：Add fade in and fade out effect to an mouseover为鼠标悬停添加淡入淡出效果
【发布时间】：2013-08-31 19:32:30
【问题描述】：

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

【问题讨论】：

您尝试过但没有成功的 jQuery 代码是什么？修改可能比从头开始制定解决方案更有效......您实际上也可以从错误的地方学到一些东西。
也请分享生成的html而不是magento代码

标签： javascript jquery magento magento-1.7

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

记住$是为原型保留的，所以你需要使用jQuery.noConflict()和jQuery('.element')

【讨论】：

【解决方案4】：

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

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

【讨论】：