Modernizr y jQuery para animar si CSS3 transiciones no existen

¿Hay una manera de utilizar una combinación de Modernizr y jQuery para permitir algo similar a las transiciones si no se admite CSS3? Lo que estoy haciendo actualmente es así ...Modernizr y jQuery para animar si CSS3 transiciones no existen

<div class="hoverable"> 
<p>This div changes both width and height on hover</p> 
</div>

El CSS es

.hoverable { 
height: 100px; 
width: 2000px; 
transition: height .5s, width .5s; 
} 

.hoverable:hover { 
height: 200px; 
width: 100px; 
}

actualmente estoy usando sólo Modernizr para hacer el div estar en el estado estacionario por defecto si las transiciones CSS3 no son compatibles. ¿Hay alguna manera de utilizar Modernizr para activar la animación de jQuery si CSS3 no es compatible? Si no es jQuery, entonces estaría bien usar animación personalizada también, pero realmente no sé cómo hacer ninguna de las dos cosas.

Fuente

2011-05-23 JacobTheDev

Puede reproducir el efecto con $ .animate(), aunque algunos efectos pueden ser muy lentos (lag) .. O simplemente puede desactivar algunos efectos en navegadores anteriores, ya que los efectos visuales generalmente no son tan importantes – Andre

Eso es lo que estoy haciendo. (Me refiero a los efectos de desactivación) – JacobTheDev

resuelto este mismo. La forma en que hice fue como esto

<!doctype html> 
<html> 
    <head> 
     <title>Modernizr + jQuery Testing</title> 
     <script type="text/javascript" src="modernizr.js"></script> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
     if(!Modernizr.csstransitions) { // Test if CSS transitions are supported 
      $(function() { 
       $('#js').hover(function(){ 
        $(this).animate({width:'50px',height:'50px'},{queue:false,duration:500}); 
       }, function(){ 
        $(this).animate({width:'100px',height:'100px'},{queue:false,duration:500}); 
       }); 
      }); 
     } 
     </script> 
     <style type="text/css"> 
      body { 
       margin: 0; 
       padding: 0; 
      } 
      div { 
       border: 1px solid red; 
       height: 100px; 
       margin: 25px auto; 
       width: 100px; 
      } 
      #css { 
       transition: height .5s, width .5s; 
       -khtml-transition: height .5s, width .5s; 
       -moz-transition: height .5s, width .5s; 
       -o-transition: height .5s, width .5s; 
       -webkit-transition: height .5s, width .5s; 
      } 
      #css:hover { 
       height: 50px; 
       width: 50px; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="js"> 
      JS 
     </div> 
     <div id="css"> 
      CSS 
     </div> 
    </body> 
</html>

Eso funcionó a la perfección. El CSS solo se anima en los navegadores nuevos (porque es el único lugar que puede) y el JS solo se anima en navegadores antiguos. Si usa este script, puede obtener modernizr de http://www.modernizr.com/ y jQuery de http://www.jquery.com/ (por supuesto).

Fuente

2011-05-24 17:03:20 JacobTheDev

Se puede utilizar:

 
if(!Modernizr.csstransitions) { // Test if CSS transitions are supported 
    $('#myDiv').bind({ 
     mouseenter: function() { 
      $(this).animate({ 
       width: 1000, 
       height: 1000 
      }, 1000); 
     }, 
     mouseleave: function() { 
      $(this).animate({ 
       width: 100, 
       height: 100 
      }, 1000); 
     } 
    }); 
}

Fuente

2011-05-23 15:03:35 amustill

Eso parece efectivo. Lo intentaré en una hora más o menos. – JacobTheDev

Intenté esto pero no pude hacerlo funcionar. ¿Se supone que debo colocarlo en otro lugar que no sea ''? – JacobTheDev

Lo tengo para trabajar, pero de manera un poco diferente. – JacobTheDev

Modernizr y jQuery para animar si CSS3 transiciones no existen

Respuesta

Cuestiones relacionadas