Используя 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

Я действительно не знаю, чего вы пытаетесь достичь, но вот совет.

Время может быть проблемой там.Код выполняется сверху вниз, но возможно, что эти 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);
  });
});

... чтобы отложить смену второго класса и посмотреть, работает ли он.

Answer 2

добавить дополнительный класс для установки анимации, 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");    
});​