¿Cómo usar velocity.js en hover?

Tengo una pregunta sobre el uso de velocity.js para desplazarse por los elementos.

Actualmente utilizo CSS para acercar / alejar y animar elementos cuando los usuarios se desplazan sobre ellos, y utilizo velocity.js para animarlos inicialmente en la carga de la página.

Así que mi pregunta es; ¿Cómo debo usar velocity.js para reemplazar estas animaciones CSS / debería hacerlo? Actualmente utilizo la velocidad en la carga de la página, ya que estoy seguro de que fue para lo que fue diseñado, pero ¿también fue diseñado para usarse con cosas como la flotación?

Con jQuery supongo que esto es cómo se aplicaría un efecto de desplazamiento:

$("element").hover(function(){ //Do something }); 

¿Es así como se hace con algo como la velocidad también? ¿Simplemente agrega el código de velocidad en la función de desplazamiento de jQuery?

Gracias por cualquier aclaración; Pensé que este era un lugar apropiado para publicar esto con un número decente de preguntas ya existentes.

Puedes usar la velocidad para efectos de hover. Aquí hay un codepen con 4 efectos diferentes en el hover: agrega un boxshadow, muestra un título y anima el texto y también escala la imagen del hovered, todo usando velocity.js Puedes ver en el código que, por ejemplo, estoy usando mouseenter y rodeo, no se ciernen. ¡Espero que esto ayude!

Velocity.js Hover Codepen

html

  

Velocity Hover

Lorem ipsum dolar.

Velocity Hover

Lorem ipsum dolar.

Velocity Hover

Lorem ipsum dolar.

CSS

 .all-captions-wrap{margin: 0 auto;text-align:center;} .caption { float: left; overflow: hidden; width: 300px; margin: 15px; } .caption img { width: 100%; display: block; } .caption figcaption { background: rgba(0, 0, 0, 0.7); color: white; padding: 1rem; } .caption figcaption h3 { font-size: 1.2rem; margin: 20px; } .caption figcaption p { margin: 20px; } .caption { position: relative; } .caption figcaption { position: absolute; width: 100%; } .caption figcaption { bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; } .figcaption-wrap { margin-top:20%; display: none; } 

Javascript

  $(document).ready(function () { $('.caption').mouseenter(function () { $(this).addClass('hover'); $('.hover').velocity({boxShadowBlur:15},{ duration: 50 }); $('.hover img').velocity({scale:1.25},{ duration: 200 }); $('.hover figcaption').velocity('transition.perspectiveLeftIn', {delay:200}); $('.hover .figcaption-wrap').velocity('transition.perspectiveRightIn', {delay:300}); }).mouseleave(function () { $('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity("stop"); $('.hover,.hover figcaption,.hover .figcaption-wrap, .hover img').velocity('reverse'); $(this).removeClass('hover'); }); }); 

Hay dos soluciones para esto. El primero es bastante sencillo, pero producirá efectos no deseados si un usuario entra y sale del elemento rápidamente. Esencialmente, la animación se repetirá durante demasiado tiempo; sin embargo, funciona bien si el usuario se desplaza casualmente sobre el elemento.

Aquí hay una demostración con esa solución .

La otra solución es más robusta y da cuenta del “cambio rápido” del usuario. Si el usuario entra y sale rápidamente del elemento, esta solución simplemente detiene e invierte la animación. Esto es lo que uso en cualquier estado de hover con velocidad.

Puedes ver esa solución aquí .

Aquí está el código javascript usando JQuery

 ... var svg = $('.curtain'); var path = svg.find('path'); // define svg path path.data({animating:false}); // add data for animation queue purposes path.hover(function() { // mouse enter /* if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly */ if (path.data('animating') === true){ path.velocity("stop", true).velocity('reverse',{ duration:300}); path.data({animating:false}); } else { // begin default animation $(this).velocity({fill: '#ffcc00'},{ duration:500, begin: function(){ path.data({animating:true}); }, complete: function(){ path.data({animating:false}); } }); } // end of conditional statement }, function() { // mouse exit /* if the path is in the middle of an animation, stop it immediately and reverse the animation. This prevents many unwanted animations if the user hovers in and out quickly */ if (path.data('animating') === true){ path.velocity("stop", true).velocity('reverse',{ duration:300}); path.data({animating:false}); } else { // begin default animation $(this).velocity({fill: '#000'},{ duration:500, begin: function(){ path.data({animating:true}); }, complete: function(){ path.data({animating:false}); } }); } // end of conditional statement }); // end of hover function ... 

También puede crear onhover para animar cosas y revertir con el mouseout.

     Untitled Document        

Some Text

Esto me funciona para efectos de desplazamiento con Velocity.