使用Jquery如何一键刷新CSS转换效果

Using Jquery how can I refresh a CSS transition effect with one click?

本文关键字：CSS 刷新 转换 一键 Jquery 何一键 使用      更新时间：2023-09-26

这是我迄今为止的代码：

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

我真的不知道你想实现什么，但这里有提示。

时间可能是个问题。代码是从上到下执行的，但这两个命令可能重叠，因为它们非常简单，而且几乎在同一时间执行。

试试这个：

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

延迟更改第二个类，看看它是否有效。

相关文章：