jquery one（）在Chrome中无法正常工作 [英] jquery one() doesnot working correctly in chrome

问题描述

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

css

  p {
 
背景：红色; 
 -webkit-transition：转换1s; / *对于Safari 3.1至6.0 * / 
 transition：transform 1s; 
} 
  

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

解决方案

因为Chrome会在前面的回答中提到的 webkitTransitionEnd 和 transitionend 事件触发。但是，删除 webkitTransitionEnd 将导致在Safari中未触发回调。为了让它在所有浏览器中一致地工作，您可以简单地在回调函数中使用布尔检查。

  var fired = false; 
 $（p）.one（webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend，function（event）{
 if（！fired）{
 fired = true; 
 //在这里做你的东西
} 
}）; 
  

来源和正在运行的 JSFiddle

I am trying to translate a p tag and after the transition ends, increase font size by 6 by Jquery one() function but it works 2 times in the google-chrome

css

p {

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

full sample at http://jsfiddle.net/7bdkr1yd/

解决方案

This is because Chrome will fire on both thewebkitTransitionEnd and transitionend events as mentioned by the previous answer. However, removing webkitTransitionEnd will result in the callback not firing in Safari. To have it work consistently across all browsers, you can simply use a boolean check within the callback function.

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

Source and working JSFiddle

这篇关于jquery one（）在Chrome中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！