Estoy tratando de encontrar la forma más concisa de acelerar una función de desplazamiento con jQuery. Hay muchos ejemplos de esto, pero todos parecen no funcionar según lo previsto. Por ejemplo, el uso de $.throttle no genera errores, pero impide que la animación funcione por completo. Este es el código que estoy tratando de acelerar:
jQuery(document).ready(function($){ var $navTab = $('.nav-tab-parent'); function moveNavTab(e) { TweenLite.to($navTab, 0.3, { css: { left: e.pageX, top: e.pageY } }); } $(window).on('mousemove', moveNavTab); $(".toggle-bars").hover( // this is the .hover() function I need to throttle. function() { $(".nav-tab-parent").animate({ opacity: 1 }); $(".nav-tab-parent").delay(10).animate({ width: "36px", easing: "swing" }); $(".nav-tab").html("MENU"); $(".nav-tab").delay(350).animate({ opacity: 1 }); }, function() { $(".nav-tab").animate({ opacity: 0 }); $(".nav-tab-parent").delay(150).animate({ width: "0", opacity: 0, easing: "swing" }); } ); });Debo estar perdiendo algo aquí, pero no puedo resolverlo. ¡Cualquier ayuda para lograr esto sería muy apreciada!
Cambiado para usar completamente GSAP y confiando en .timescale() consulte la documentación ; no conocía la estructura subyacente, por lo que necesitará alguna configuración, pero la base está ahí. GSAP tiene una documentación profunda y loca, pero debería estar lo suficientemente familiarizado como para jquery con animaciones de objetos.
var tl = gsap.timeline().timeScale(-1); tl.fromTo(".nav-tab-parent", { autoAlpha: 0, duration: 1 }, { autoAlpha: 1, duration: 1 }); $(".toggle-bars").hover(function() { tl.timeScale(1); }, function() { tl.timeScale(-1); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="toggle-bars">.toggle-bars <div class="nav-tab-parent">.nav-tab-parent</div> </div>Supongo que estás tratando de lograr algo como esto. Puede intentar usar el método .stop() : detendrá la animación actual y luego podrá ejecutar la siguiente. Intenta jugar con los argumentos para elegir lo que mejor se adapte a tu caso.
let $hover = $('.hover-box'), $target = $('.animated-box'); function show() { $target.stop(true, true).animate({ opacity: 1, }) } function hide() { $target.stop(true, true).animate({ opacity: 0 }) } $hover.hover(show, hide) .hover-box, .animated-box { width: 100px; height: 100px; border-radius: 8px; } .hover-box { border: 1px solid #ddd; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; font-family: sans-serif; cursor: pointer; margin-bottom: 16px; } .hover-box:hover { background: #ddd; } .animated-box { opacity: 0; background: gold; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='hover-box'>Hover</div> <div class='animated-box'></div>