使用jquery触发css3关键帧 [英] Trigger css3 keyframes using jquery
本文介绍了使用jquery触发css3关键帧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我写了一个关键帧动画:
I wrote a keyframe animation:
@-webkit-keyframes cubemove {
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
100% {-webkit-animation-play-state:paused;}
}
.cubebox {
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
}
我想在使用以下html和查询代码:
I want to run this animation on a rectangle I made using the following html and query code code:
<figure id="box">
<img src="/images/cube/step1.jpg"/>
<img src="/images/cube/step2.jpg"/>
<img src="/images/cube/step3.jpg"/>
<img src="/images/cube/step4.jpg"/>
<img src="/images/cube/step5.jpg"/>
<img src="/images/cube/step6.jpg"/>
</figure>
<button class="commencer">Start</button>
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
$('.commencer').click(function(){
$('#box').addClass('cubemove');
});
$('.commencer').click(function(){
$(this).removeClass('cubemove');
});
});
</script>
事情是,当我点击按钮没有任何反应。我对jquery不是很好,所以这可能是问题。
The thing is that nothing happen when I click on the button. I am not very good with jquery so that might be the problem.
非常感谢您的帮助!
Matt
推荐答案
我发现了问题。这是一个查询冲突问题。
我使用下面的代码,它工作。
I found the problem. It was a query conflict problem. I used the following code and it worked.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".commencer").click(function(){
jQuery("#box").addClass("cubebox");
});
});
</script>
这篇关于使用jquery触发css3关键帧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文