jquery one（）在chrome中无法正常工作

我试图翻译一个p标签，在转换结束后，通过Jquery one（）函数将字体大小增加6，但它在google-chrome中工作了2次

CSS

 p { background: red; -webkit-transition: transform 1s; /* For Safari 3.1 to 6.0 */ transition: transform 1s; } 

http://jsfiddle.net/7bdkr1yd/上的完整样本

Answer 1

这是因为Chrome会同时webkitTransitionEnd和transitionend事件，如上一个答案所述。 但是，删除webkitTransitionEnd将导致回调未在Safari中触发。 要让它在所有浏览器中保持一致，您只需在回调函数中使用布尔检查即可。

 var fired = false; $( "p" ).one( "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function( event ) { if ( !fired ) { fired = true; // do your stuff here } }); 

来源和工作JSFiddle

Answer 2

这是因为在chrome中附加了两个事件webkitTransitionEnd和transitionend 。要解决此问题，您可以在运行动画之前检查类添加doneamnimation 。 如果没有，那么做动画并将类添加到元素：

 $("p").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event ){ if($(this).is('.doneamnimation')) $(this).addClass('doneamnimation').animate({fontSize: "+=6px"}); }); 

演示