使用 Jquery 如何一键刷新 CSS 过渡效果？答案

【问题标题】：Using Jquery how can I refresh a CSS transition effect with one click?使用 Jquery 如何一键刷新 CSS 过渡效果？
【发布时间】：2012-02-26 06:18:38
【问题描述】：

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

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

【问题讨论】：

你为什么要切换一个类，只是为了立即再次切换它？我不遵循您要完成的工作。你能更具体一点，更彻底地解释你遇到的问题吗？
我还是不明白你在做什么。 “过渡”是什么意思？你正在转换到/从什么？你想做什么？
基本上通过单击，我试图用文本填充一个框，并随着时间的推移将字母从小写字母转换为大写字母。我通过切换两个课程成功地做到了这一点，但我一遍又一遍地做这件事时遇到了麻烦。也许我使用了完全错误的方法？感谢您的帮助。

标签： javascript jquery css transitions

【解决方案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");    
});

【讨论】：

如果投反对票的人能证明投反对票的理由会更好。

【解决方案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);
  });
});

...延迟更改第二个班级，看看它是否有效。

【讨论】：