jquery one() 在 chrome 中无法正常工作答案

【问题标题】：jquery one() doesnot working correctly in chromejquery one() 在 chrome 中无法正常工作
【发布时间】：2015-04-04 00:50:17
【问题描述】：

我正在尝试翻译 p 标记，在过渡结束后，通过 Jquery one() 函数将字体大小增加 6，但它在 google-chrome 中工作 2 次p>

css

p {

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

完整示例http://jsfiddle.net/7bdkr1yd/

【问题讨论】：

标签： jquery html css google-chrome

【解决方案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
    }
});

Source 和正在工作的JSFiddle

【讨论】：

【解决方案2】：

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

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

Demo

【讨论】：