Question

我已经使用了jQueryUI toggleClass延迟函数但是我意识到它会在事件发生之前创建一个延迟，而不是设置一个时间才能再次激活。

我有几个DIV在使用toggleClass方法悬停时在类之间切换。但是，如果光标快速移动到它们上方，它们将继续交换并且看起来很麻烦。我想通过允许切换仅每1秒发生一次或其他事情来阻止这种情况。

这可能吗？

＆＃13;

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

＆＃13;

    #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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

如果您想有条件地延迟hover事件，可以使用window.setTimeout延迟操作。

这个想法就是你 - 将更改设置为等待一会儿 - 设置鼠标移出行为以取消挂起的更改。

此代码将执行类似的操作：

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);
}

由于setTimeout是window方法，this不再有效。这里我为原始元素设置了一个变量。我通常用$作为jQuery变量的前缀，但这只是一个品味问题。

当然，我还没有在你的环境中进行测试。

关于CSS方式：

如果您想避免即时更改，可以将以下内容添加到CSS中：

transition-delay: .25s;

或任何适合你的。

transition-delay也可以与一般的transition属性结合使用（将其放在最后），但请先尝试一下，看看它是如何工作的。

如何延迟toggleClass事件以防止垃圾邮件更改？

1 个答案: