如何在 .hover() 中使用油門； jQuery？

Question

我試圖找到最簡潔的方法來使用 jQuery 限制懸停功能。 有很多這樣的例子，但它們似乎都沒有按預期工作。 例如，使用$.throttle不會出錯，但它會完全停止動畫工作。 這是我試圖限制的代碼：

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"
      });
    }
  );
});

我一定在這里遺漏了一些東西，但無法弄清楚。 任何幫助實現這一目標將不勝感激！

Answer 1

我想你正在努力實現這樣的目標。 您可以嘗試使用.stop()方法 - 它會停止當前動畫，然后您可以運行下一個。 嘗試使用論據來選擇最適合您的情況。

 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>

Answer 2

更改為完全使用 GSAP 並依賴.timescale()請參閱文檔- 不知道底層結構，因此需要一些配置，但基礎在那里。 GSAP 有一個非常深入的文檔，但應該足夠熟悉 jquery 和對象動畫。

 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>