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。 I.E.你可以

$("#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
}

请参阅小提琴http://jsfiddle.net/guybrushthreepwood/597sD/

使用CSS转换合并Jquery .css

1 个答案: