如何使用Jquery一鍵刷新CSS過渡效果？

Question

到目前為止，這是我的代碼：

$(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;    
}

Answer 1

添加額外的類來設置動畫， 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");    
});​

Answer 2

我真的不知道您要完成什么，但這是提示。

時間安排可能是一個問題。 代碼是從上到下執行的，但是這兩個命令很可能是重疊的，因為它們確實很簡單並且幾乎同時執行。

嘗試這個：

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

或這個：

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

    setTimeout(function(){
        $(".synopsis").toggleClass("synopsis-change");
    },100);
  });
});

...以延遲更改第二類並查看其是否有效。