javascript-triggered jquery transitions

Question

I have the following javascript code that animates an overlay on an image.

How can I make the effect just sliding, instead of rotating around X?

jQuery(".portfolio-item .portfolio-media-wrapper.gdl-image").hover(function(){
    if (jQuery.support.transition){ 
        jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg', duration: 0});
        jQuery(this).children('a.hover-wrapper').transition({ opacity: 1, rotateX: '0deg' });
    }else{
        jQuery(this).children('a.hover-wrapper').animate({ opacity: 1 });
    }
}, function(){
    if (jQuery.support.transition){ 
        jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg' });
    }else{
        jQuery(this).children('a.hover-wrapper').animate({ opacity: 0 });
    }   
});

Answer 1

If you want to make the effect sliding instead of rotation, then you should simply pass position properties into the transition() function instead of rotation properties. For example, instead of:

// in the JavaScript file
jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, rotateX: '180deg', duration: 0});
jQuery(this).children('a.hover-wrapper').transition({ opacity: 1, rotateX: '0deg' });

you could use:

// in the JavaScript file
jQuery(this).children('a.hover-wrapper').transition({ opacity: 0, left: '200px', duration: 0});
jQuery(this).children('a.hover-wrapper').transition({ opacity: 1, left: '0px' });

and you could give the child elements of a.hover-wrapper a CSS style rule that sets their position to relative, which is what will allow the left property to have an effect.

/* in the CSS file */
a.hover-wrapper {
    position: relative;
}