0

我正在学习 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);}
}

这段代码有什么问题？

4

1 回答 1

0

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

附言。请使用跨浏览器 css，不只是 Mozilla，帮助你其他人会更简单。-webkit-, -o-, -moz-,-ms-是所有前缀 AFAIK

于 2013-09-26T13:44:41.027 回答