Question

jquery中animate的transform scale用法 为什么我老是没有效果

<script type="text/javascript">
$(function(){
$(".btn").click({
function(){
$("#img").animate({scale:'+=0.5'},{queue:false,duration:1000});
}
})
})
</script>
html：
<img src="images/1.jpg" class="img">

<button class="btn" type="button">按钮</button>

Answer 1

.addw{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.add{
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5) }
然后用jquery.addclass("addw").addclass("add");这样就可以了！上stack overflow上收的也多半是这种办发。

追问

想要有动画效果这样可以么

Answer 2

可以通过addClass()方法来代替此动作：

比如想旋转一个icon:

在css中加入一个class

[css] view plain copy

• .add_transform{  

• transform:rotate(180deg);  

• -ms-transform:rotate(180deg);    /* IE 9 */  

• -moz-transform:rotate(180deg);   /* Firefox */  

• -webkit-transform:rotate(180deg); /* Safari 和 Chrome */  

• -o-transform:rotate(180deg);    /* Opera */  

• transition: all 0.5s ease-in-out;  

• -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */  

• -webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */  

• -o-transition: all 0.5s ease-in-out; /* Opera */  

• }  




然后通过$("选择器").toggleClass(".add_transform");来使icon的旋转变为动画效果。

或者下载补丁（加一个js文件）：

https://github.com/zachstronaut/jquery-animate-css-rotate-scale/