jquery - 将 Jquery .css 与 CSS 转换合并

Question

#contact{position:absolute;right:20px;top:15%;width:450px;opacity:0.8;color:#fff;background-color:rgba(0,0,0,0.5);overflow:hidden;border-radius:212px;height:425px;width:425;display:none;-webkit-transform:scale(10);-webkit-transition:1s all ease-in-out;}
.contact-small{display:block;-webkit-transform:scale(1);}

我有一个 jquery 脚本:

$(document).ready(function(){
$("#contactopt").click(function(){
    $("#contact").addClass('contact-small');
);
});

和 HTML:

<!-- NAVIGATION -->
<table id="nav"><tr><td style="vertical-align:middle;text-align:center;font-size:0.25em;">
<span id="homeopt">home</span><br>
<span id="contactopt">contact</span><br>
<span id="projectsopt">projects</span>
</td></tr></table>
<!-- /NAVIGATION -->

<TABLE id="contact"><tr><td style="vertical-align:middle;text-align:center;">!</td></tr></table>

我使用 Chrome 进行测试

但是..当变化发生时，我看不到任何动画。谁能给我一个解决方案？提前致谢。 :) 任何帮助将不胜感激。

Answer 1

您可以尝试使用类而不是将 css 直接添加到对象。 IE。你可以拥有

$("#mercuryopt").click(function(){
    $("#mercuryon").addClass('mercuryion-small');
);

在你的CSS中

.mercuryon-small {
  -webkit-transform: scale(1) !important; //if you are using an id, then !important is needed
}

参见 fiddle http://jsfiddle.net/guybrushthreepwood/597sD/