0

私はCSS3を学んでいます（jQueryとCSS3を使用しています）。クラスCSS3をクリックすると機能しますが、2回目のクリックでは機能しません。

<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

それは問題のようです: 2 回目の css プロパティをクリックすると、最初のクリックで既にこの値に設定されており、何もする必要がないことを意味します。プロパティをクリア (「none」や「auto」などのデフォルトの css 値に設定) し、クリックするたびに再度設定してみてください。

ps。mozilla だけでなく、クロスブラウザ CSS を使用してください。より簡単に他の人を助けることができます。-webkit-、、、-o-はすべて接頭辞です-moz-。-ms-

于 2013-09-26T13:44:41.027 に答える