jQuery调用CSS3版本的stop（true，false）和来自事件的动画？

任何人都可以告诉我如何使用CSS3来做到这一点 ？

http://jsfiddle.net/dYYZP/65/

我一直试图找出如何通过事件调用CSS3转换并停止转换，如jQuery的stop(true, false)数月。

 var under = true; $("#outer").bind({ click : function() { if(under){ $("#inner").stop(true, false).animate( { left: 50 }, 500); } else{ $("#inner").stop(true, false).animate( { left: -50 }, 500); } under = !under; } }); 

Answer 1

http://jsfiddle.net/dYYZP/81 （请注意，为方便起见，我只包含了-webkit ）。

CSS 2D变换translate可用于沿X / Y轴移动元素。 这与CSS3过渡相结合，允许类似的动画。

如果你想纯粹用CSS做这个，那么你必须让红色框为复选框元素的 ，然后有一个选择器，如:checked + .slideout ，它将包含翻译规则。

动画期间无法停止CSS转换; 只有动画完成后（通过删除规则）。

Answer 2

这是你想要做的吗？

我刚刚将以下代码添加到#inner的css中：

 transition:left .5s; -moz-transition:left .5s; -webkit-transition:left .5s; 

希望能帮助到你。