jquery one() doesnot working correctly in chrome

Question

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/

Answer 1

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

Answer 2

That is because two event webkitTransitionEnd and transitionend are attached in chrome.To resolve this, you can check for class say doneamnimation added before running the animation. if not, then do the animation and add class to element:

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

Demo