CSS3 transitions inside jQuery .css()

Question

When I add the transition line into my code it breaks jQuery. How can I fix it?

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

I'm trying to set up a fade from one div to the next inside a slider

@Fresheyeball, my script does not run at all when that line is there. — Scott B, Apr 19 '12 at 22:39

score 44 · Accepted Answer · edited Jan 07 '19 at 13:43

44

Step 1) Remove the semi-colon, it's an object you're creating...

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out';
});

to

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out'
});

Step 2) Vendor-prefixes... no browsers use transition since it's the standard and this is an experimental feature even in the latest browsers:

a(this).next().css({
    left             : c,
    WebkitTransition : 'opacity 1s ease-in-out',
    MozTransition    : 'opacity 1s ease-in-out',
    MsTransition     : 'opacity 1s ease-in-out',
    OTransition      : 'opacity 1s ease-in-out',
    transition       : 'opacity 1s ease-in-out'
});

Here is a demo: http://jsfiddle.net/83FsJ/

Step 3) Better vendor-prefixes... Instead of adding tons of unnecessary CSS to elements (that will just be ignored by the browser) you can use jQuery to decide what vendor-prefix to use:

$('a').on('click', function () {
    var myTransition = ($.browser.webkit)  ? '-webkit-transition' :
                       ($.browser.mozilla) ? '-moz-transition' : 
                       ($.browser.msie)    ? '-ms-transition' :
                       ($.browser.opera)   ? '-o-transition' : 'transition',
        myCSSObj     = { opacity : 1 };

    myCSSObj[myTransition] = 'opacity 1s ease-in-out';
    $(this).next().css(myCSSObj);
});

Here is a demo: http://jsfiddle.net/83FsJ/1/

Also note that if you specify in your transition declaration that the property to animate is opacity, setting a left property won't be animated.

edited Jan 07 '19 at 13:43

souzan

289
1
2
14

answered Apr 19 '12 at 22:27

Jasper

75,717
14
151
146

1

Wait, what semi-colon did you remove? – animuson Apr 19 '12 at 22:29
3

The OP removed the semi-colon from the code, I'll post an example of what I'm talking about. – Jasper Apr 19 '12 at 22:30
@Jasper, are your prefixes native to jQuery? in css they are -webkit-transition for example (as opposed to WebkitTransition). – Scott B Apr 19 '12 at 22:38
1

@ScottB `WebkitTransition` is DOM-style syntax, used like this: `document.getElementById('some-id').style.WebkitTransition = 'opacity 1s east-in-out';`. `-webkit-transition` is CSS-style syntax. jQuery can handle either style of syntax. – Jasper Apr 19 '12 at 22:40
@ScottB It was on the tip of my tongue, and I finally remembered, `WebkitTransition` is called "Camel Case." – Jasper Apr 19 '12 at 22:44
Would it be better to specify all transition properties (as in step 2) instead of writing code to select a single transition property (as in step 3)? The reason I ask is because browsers are all moving to the standard, so -moz-transition is now depreciated. Doing it using all properties seems more "future proof." – Redtopia Nov 29 '12 at 22:34
3

@Redtopia I think the best case scenario is when you detect by feature rather than detect by User-Agent. Modernizr does a good job of this, allowing you to only use the property (or properties) supported by the current browser. If you're interested in Modernizr, check-out the `prefixed` method, which gives you the correctly prefixed property name when you pass-in the standard property name. e.g. `Modernizr.prefixed("transform")` in a webkit browser will return `-webkit-transform`. – Jasper Nov 29 '12 at 23:45
$.browser is not supported as of jQuery 1.9+ – jperelli Feb 20 '13 at 21:06
@jperelli True, I personally use Modernizr now. For jQuery 1.9 you can use the Migration Plugin to patch the `$.browser` implimentation if you like. – Jasper Feb 20 '13 at 21:47
3

As far as today, Chrome recognizes _just_ `transition`. – spectre-d Jun 14 '16 at 16:34

score 6 · Answer 2 · answered Mar 11 '13 at 18:45

Your code can get messy fast when dealing with CSS3 transitions. I would recommend using a plugin such as jQuery Transit that handles the complexity of CSS3 animations/transitions.

Moreover, the plugin uses webkit-transform rather than webkit-transition, which allows for mobile devices to use hardware acceleration in order to give your web apps that native look and feel when the animations occur.

JS Fiddle Live Demo

Javascript:

$("#startTransition").on("click", function()
{

    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });

});

Most of the hard work of getting cross-browser compatibility is done for you as well and it works like a charm on mobile devices.

CSS3 transitions inside jQuery .css()

2 Answers2

Linked