javascript 触发的 jquery 转换

【问题标题】：javascript-triggered jquery transitionsjavascript 触发的 jquery 转换
【发布时间】：2014-04-08 22:40:01
【问题描述】：

我有以下 javascript 代码，可以为图像上的叠加层设置动画。

我怎样才能使效果只是滑动，而不是围绕 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 });
    }   
});

【问题讨论】：

标签： javascript jquery transform

【解决方案1】：

如果你想让效果滑动而不是旋转，那么你应该简单地将位置属性传递给transition() 函数而不是旋转属性。例如，而不是：

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

你可以使用：

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

您可以为a.hover-wrapper 的子元素提供一个CSS 样式规则，将它们的position 设置为relative，这将使left 属性生效。

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

【讨论】：