用jquery重现css3转换

its*_*sme 5 javascript css jquery css3 jquery-effects

嗨有没有人可以告诉我使用jquery使用一些延迟/动画速度重现这个css3效果?

.element:hover{
-moz-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1.3) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
z-index:9999;

}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

Bri*_*laz 1

这与您所要求的非常接近。我相信你可以根据自己的喜好进行调整

$('.element').hover(function(){

    $(this).css('position','relative').animate({
        height: $(this).height()*1.3,
        width: $(this).width()*1.3,
        left: '-=' + $(this).width() /4,
        top: '-=' + $(this).height() /4,
        'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) * 1.3 + 'px'
    },'fast');
},
 function() {                 
       $(this).css('position','relative').animate({
        height: $(this).height()/1.3,
        width: $(this).width()/1.3,
        left: 0,
        top: 0,
        'fontSize': $('.element').css('fontSize').substring(0,$('.element').css('fontSize').length -2) / 1.3 + 'px'
    },'fast');
}            

);
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/dTkhM/2/

  • 我确实说过它不完美不是吗?问题是,当您更改 div 的宽度和高度时,它会从左上角开始缩放,而不是像 css3 变换那样从中间开始缩放。为了解决这个问题,我不得不修改 TOP 和 LEFT 属性,但我不知道它们的正确值应该是什么。另一个问题是我不确定 CSS 如何处理十进制值,例如 font-size: 13.313452px。 (2认同)