Question

我正在学习CSS3（使用jQuery和CSS3）。如果我单击CSS3类它正在工作，但第二次单击它不起作用。

<script src="jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="custom.css">

HTML：

div id="test"  class="animate">Try me</div>

<div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click here</h3></div>

jQuery的：

$(document).ready(function(){
    $(".fff").click(function(){
        $("#test,.animate").css({"transition":"all 10s",
                                 "-moz-animation-name":"test", 
                                 "-moz-animation-duration":"1s"});
    });
});

CSS：

#test {
    width:160px;
    height:200px;
    margin: 100px;
    background:#68C6F2; 
}
@keyframes test{
    from { -moz-transform: translateX(100%) scale(.1) rotateY(90deg);}
}

此代码有什么问题？

Answer 1

这似乎是一个问题：当你点击第二次css属性已经通过第一次点击设置为这个值，这意味着你无事可做。尝试清除（设置为默认的css值，如“none”或“auto”）属性，并在每次单击时再次设置。

PS。请使用跨浏览器的CSS，不仅是mozilla，它会更简单地帮助你的其他人。 -webkit-，-o-，-moz-，-ms-是所有前缀AFAIK

在第一次单击时，CSS3工作但第二次单击不起作用，为什么？

1 个答案: