[英]How do I use throttle with .hover(); jQuery?
I'm trying to find the most concise way to throttle a hover function with jQuery.我试图找到最简洁的方法来使用 jQuery 限制悬停功能。 There are many examples of this but they all seem to not work as intended.
有很多这样的例子,但它们似乎都没有按预期工作。 For example the use of
$.throttle
doesn't error but it stops the animation from working altogether.例如,使用
$.throttle
不会出错,但它会完全停止动画工作。 This is the code which I'm trying to 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"
});
}
);
});
I must be missing something here but can't figure it out.我一定在这里遗漏了一些东西,但无法弄清楚。 Any help in achieving this would be greatly appreciated!
任何帮助实现这一目标将不胜感激!
I suppose you are trying to achieve something like this.我想你正在努力实现这样的目标。 You could try to use
.stop()
method - it will stop current animation and after that you can run next one.您可以尝试使用
.stop()
方法 - 它会停止当前动画,然后您可以运行下一个。 Try to play with arguments to choose what best will suit your case.尝试使用论据来选择最适合您的情况。
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>
Changed to use entirely GSAP and relying on .timescale()
see the documentation — didn't know the underlying structure so will need some configuring but the basis is there.更改为完全使用 GSAP 并依赖
.timescale()
请参阅文档- 不知道底层结构,因此需要一些配置,但基础在那里。 GSAP has a crazy deep documentation but should be familiar enough to jquery with object animations. 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.