logo标签列表

使用jQuery触发CSS3关键帧动画

jquerycsswebkitwebkit-animation
5

我写了一个关键帧动画：

@-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和query代码制作的矩形上运行这个动画： 

<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不太熟悉，这可能是问题所在。

非常感谢您的帮助！

Matt

3个回答
6

您正在为同一个按钮添加添加和删除类的点击事件。 结果是该元素将与开始时完全相同的状态。 建议首先尝试使用两个不同的按钮。

@Matt1510 另外，你定义了一个类 cubebox，但是你却添加了类 cubemove。 - robertc
我看到了，我在复制时犯了一个错误。 - Matt1510
4

我找到了问题所在，这是一个查询冲突的问题。我使用以下代码解决了它。

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".commencer").click(function(){
        jQuery("#box").addClass("cubebox");
    });
});

</script>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接