jquery and CSS3 transitions

Question

I've written a script that uses a lot of user options for animation timing, properties, etc and can't seem to figure out how to add css3 animations (that would fallback to jquery)

Say I have the following code (just an example):

$Element.bind('click',function(){
    var bc=options.borderColor,
        bw=options.borderWidth,
        l= options.left,
        speed=options.speed,
        bc_ease=options.borderColorEasing,
        bw_ease=options.borderColorWidth,
        l_ease=options.leftEasing;


if(Modernizr.csstransitions){
    // CSS3 .....


}else{
   // JS

    $Overlay.animate({borderColor: bc, borderWidth: bw, left: L },
     {duration:speed, queue:false, specialEasing: {borderColor: bc_ease,
     borderWidth: bw_ease, left: L_ease }});

};
});

I've also built a CSS Rule updater function which I imagine I'll be needing:

setCSSRule:function(getRule,newRule){
    var styles=document.styleSheets;
    for(var i=0,l=styles.length; i<l; ++i){
        var sheet=styles[i]; 
        if(sheet.title === "style"){
            var rules=sheet.cssRules;
            for(var j=0, l2=rules.length; j<l2; j++){
            var rule=rules[j];
                // SELECT APPROPRIATE RULE IN STYLESHEET AND UPDATE IT
                if(getRule === rule.selectorText){  
                                     rule.style.cssText=newRule;
                     };
            };
        };
    };
},

This just loops through all of stylesheets, finds the correct rule then updates it with the provided new rule.

I have a basic understanding of CSS3 transitions, but am used to animating in jQuery and JS so CSS3 transitions come off as a bit backwards to me. From what I've read I can use addClass or Toggle class to achieve this, but need to insert the user options (as shown in the variables from the first snippet of code) into the CSS3 transitions (which is why I set out to build the CSS Rule update function), but am now currently stuck. Any help would be AMAZING! Thanks guys :)

Answer 1

This should work. You can also animate individual properties instead of all , like transition: color 0.25s ease-in-out ( transition: property time easing; )

.overlay {
   border-color : #333;
   border-style : solid;
   border-width : 1px;
   left : 0;
    -webkit-transition  : all 0.25s ease-in-out;  
       -moz-transition  : all 0.25s ease-in-out;  
         -o-transition  : all 0.25s ease-in-out; 
            transition  : all 0.25s ease-in-out; 

    }

.overlay.animate {
    border-color : #000;
    border-width : 5px;
    left :100px;
    }

and the jQuery—

if(Modernizr.csstransitions){

      $Overlay.addClass('animate');

  }

Answer 2

jquery-animate-enhanced使用jquery和feature-detects支持css3，并在可用时使用它：

http://playground.benbarnett.net/jquery-animate-enhanced/