javascript - 如何使用Jquery一键刷新CSS过渡效果？

到目前为止，这是我的代码：

$(document).ready(function(){
  $(".KD").click(function(){
    $("p").load('KD.html');
    $(".video").load('KDVideo.html');
    $(".synopsis-change").toggleClass("synopsis");
    $(".synopsis").toggleClass("synopsis-change");
  });
});

它似乎可以多次单击，但是我很难让它仅一次单击。你知道我在做什么错吗？谢谢您的支持。 :-)

这是CSS：

synopsis  {
font-size: 2px;
-webkit-transition: font-size 10s ease;
}
.synopsis-change {
font-size: 18px;
}

最佳答案

添加额外的类来设置动画，http://jsfiddle.net/2Lf3D/

<span class="KD">click to start animation</span>
<div class="synopsis font-animation">****</div>

.synopsis  {
font-size: 2px;
}
.synopsis-change {
font-size: 18px;
}
.font-animation{
-webkit-transition: font-size 1s ease;
}

$(".KD").click(function() {
    $(".font-animation").toggleClass("synopsis").toggleClass("synopsis-change");
});​