I'm trying to find the most concise way to throttle a hover function with 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. 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!
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 has a crazy deep documentation but should be familiar enough to jquery with object animations.
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>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. 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>