小编Paw*_*weł的帖子

我没有默认的动画元素.还有一个触发器可以让我打开和关闭该元素的动画.动画本身非常简单:从左到右移动元素.

当我停止动画时,我的元素显然会回到初始位置.但它突然回来了,并不顺利.所以它只是改变了我从关闭动画到初始动画时的位置.我的问题是:有没有办法让它顺利停止,所以当我关闭动画时它会回到初始位置但是平滑/动画.

这是我的元素和动画:http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 2s infinite ease-in-out;
}

@-webkit-keyframes dance {
  0%, 100% { -webkit-transform: translateX(0); }
  50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
  0%, 100% { -moz-transform: translateX(0); }
  50% { -moz-transform: translateX(300px); }
}

我有类似的东西:

$('input[type=file]').on('change', function(){ 
console.log('changed!'); });

它不起作用.它适用于其他表单元素,但不适用于输入[type = file].但是,当我将.on()函数更改为.live()时,它可以正常工作.我使用jQuery 1.8.3但我想升级到1.9.0所以不再有.live()函数了.有任何想法吗？