CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chrome
Tibin Varghese
Tibin Varghese

Reputation: 125

jquery one() doesnot working correctly in chrome

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/

Upvotes: 2

Views: 1821

Answers (2)

Bart Jedrocha
Bart Jedrocha

Reputation: 11570

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

Upvotes: 5

Milind Anantwar
Milind Anantwar

Reputation: 82241

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

Upvotes: 1

Related Questions