我如何在.hover()中使用油門；jQuery？-有解無憂

我試圖找到最簡潔的方法來使用 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"
      });
    }
  );
});

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

uj5u.com熱心網友回復：

我想你正在努力實作這樣的目標。您可以嘗試使用.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>

uj5u.com熱心網友回復：

更改為完全使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/340041.html

標籤：javascript 查询节流

上一篇：無需點擊即可重定向

下一篇：如何使用JS/JQUERY從陣列創建特定表