Я изучаю 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);}
}
Что не так с этим кодом?
это, кажется, проблема в том, что: когда вы щелкнули второй раз свойства css, уже установленные для этих значений, сначала щелкните, и это означает, что вам нечего делать. Попытайтесь очистить (установите значения по умолчанию css, такие как свойства "none" или "auto"), и снова установите каждый клик.
пс. используйте кросс-браузер css, а не только mozilla, он будет проще помочь вам другим людям. -webkit-
, -o-
, -moz-
, -ms-
- все префиксы AFAIK
.css({"transform":"none"});
значения по умолчанию вы можете найти на сайте w3c, например для tranform w3schools.com/cssref/css3_pr_transform.asp