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

User · Answer

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.

User · Answer

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

[jquery] CSS3 transitions inside jQuery .css()

The answer is

Examples related to jquery

Examples related to css-transitions

Tags