CODEWITHSUNDEEP
javascriptjquerymagentomagento-1.7
Alex
Alex

Reputation: 1073

Add fade in and fade out effect to an mouseover

I am using Magento 1.7.0.2 and I have this code :

<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) ?>';" />

This code change the Base image of a product in category page with the Thumbnail image when mouseover. The transition is instantly.

I want to add a fade out effect for the Base image and Fade in Effect for Thumbnail image when i use mouseover. So that i can create a nice effect of transition between the images.

I tried this jquery code but didnt work :

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

and replaced onmouseover with

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

Upvotes: 0

Views: 1671

Answers (4)

Alex
Alex

Reputation: 1073

It was very complicated with javascript or jquery to create the thing i wanted. So i did modify the php code and added some css. Works perfect.

So actually instead of using one picture and changing source when mouseover i used 2 pictures, one behind the other, and some css effects.

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

and the css is :

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

Upvotes: 0

arlg
arlg

Reputation: 1138

You should better use CSS opacity and transition this property. In your javascript you just have to change the classes of you elements.

The transition would be smoother especially on mobile devices

Upvotes: 1

Steve Robbins
Steve Robbins

Reputation: 13812

Are you sure you're passing a jQuery object into your fadeOut function?

Remember that $ is reserved for prototype, so you need to use jQuery.noConflict() and jQuery('.element')

Upvotes: 0

Vladimir
Vladimir

Reputation: 387

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

Upvotes: 0

Related Questions