After implementing the jQueryUI toggleClass delay function, I noticed that it introduces a delay before the event occurs instead of setting a specific timing for when it can be triggered again.
I have multiple DIVs that switch classes when hovered over using the toggleClass method. However, if the cursor moves rapidly over them, they keep switching and create a glitchy effect. I want to prevent this by potentially limiting the toggle to occur only once every second or some other specified interval.
Is there a way to achieve this?
$(".landingImage").hover(function () {
var curHeight = this.clientHeight;
$(this).siblings('.imageCover').css("height", curHeight / 1.25);
$(".leftLanding").toggleClass("extraMargin");
$(".rightLanding").toggleClass("extraMargin");
$(this).siblings(".imageCenter").fadeOut(50);
}, function () {
$(this).siblings('.imageCover').css("height", "0px");
$(this).siblings(".imageCenter").fadeIn(600);
}); #landing-images {
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin-top: 6%;
margin-bottom: 5%;
}
.leftLanding {
display: flex;
position: relative;
width: 85%;
margin-left: 3%;
cursor: pointer;
transition: all 0.5s ease;
}
.rightLanding {
display: flex;
position: relative;
width: 85%;
margin-right: 3%;
cursor: pointer;
transition: all 0.5s ease;
}
.extraMargin {
margin-left: 12%;
margin-right: 12%;
}
.landingImage {
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 90;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
<a href="menu.html"><div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div></a>
<a href="contact.html"><div class="rightLanding right">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG3.png">
</div></a>
<a href="burritos.html"><div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
</div>
<img class="landingImage" src="assets/landingIMG2.png">
</div></a>
</div>