[英]How can I recreate this effect/transition/animation? (HTML/CSS/JQuery)
[英]Using Jquery how can I refresh a CSS transition effect with one click?
到目前为止,这是我的代码:
$(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);
});
});
...以延迟更改第二类并查看其是否有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.