How to delay a toggleClass event to prevent spam changes?

Question

I have used the jQueryUI toggleClass delay function however I realised that it creates a delay before the event happens, rather than setting a time before it can be activated again.

I have a few DIVs that switch between classes when they are hovered over using the toggleClass method. However if the cursor is moved quickly over them they keep swapping and it looks buggy. I would like to prevent this by perhaps allowing the toggle to only happen once every 1 second or something.

Is this possible?

    $(".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>

http://stackoverflow.com/questions/6231052/how-to-have-a-mouseover-event-fire-only-if-the-mouse-is-hovered-over-an-element might help you — Vinod Louis, Apr 17 '17 at 10:51

Manngo · Answer 1 · 2017-04-17T11:24:32.390

If you want to conditionally delay the hover event, you can delay the action using window.setTimeout.

The idea is that you - set the change to wait for a short while - set the mouse out behaviour to cancel the pending change.

This code will do something like it:

var delay;
$(".landingImage").hover(function () {
    window.setTimeout(doit,250);    //   queue action
}, function () {
    cancel();   //  clear hover, if still pending
    $(this).siblings('.imageCover').css("height", "0px");
    $(this).siblings(".imageCenter").fadeIn(600);
});

function doit() {
    var $landingImage=$(".landingImage");
    var curHeight = $landingImage.clientHeight;
    $landingImage.siblings('.imageCover').css("height", curHeight / 1.25);
    $(".leftLanding").toggleClass("extraMargin");
    $(".rightLanding").toggleClass("extraMargin");
    $landingImage.siblings(".imageCenter").fadeOut(50);

    delay=undefined;
}
function cancel() {
    if(delay) delay=window.clearTimeout(delay);
}

Because setTimeout is a window method, this is no longer valid. Here I have set a variable to the original element. I generally prefix jQuery variables with $, but that is just a matter of taste.

I haven’t tested in your environment, of course.

As regards doing it the CSS way:

If you want to avoid instant changes, you can add the following to your CSS:

transition-delay: .25s;

or whatever suits you.

transition-delay can also be combined with the general transition property (put it last), but try this first to see how it works.

This wasn't exactly what I was asking for but tbh it's resulted in an effect quite similar to what I'm after. It will work as a fallback if there isn't a better solution. +1 for that — Xander, Apr 17 '17 at 11:02
@EthanBristow Sorry, I misread that. You’re right. Have you seen this: http://stackoverflow.com/questions/435732/delay-jquery-hover-event ? — Manngo, Apr 17 '17 at 11:05
@Manngo Unfortunatley in this particular instance the only 3rd party material I can use is the offcial jQuery. Thank you anyway though — Xander, Apr 17 '17 at 11:11
@EthanBristow I have amended my answer to include a JavaScript solution. — Manngo, Apr 17 '17 at 11:25

How to delay a toggleClass event to prevent spam changes?

1 Answers1