ToggleClass没有添加Jquery延迟吗？

Question

我正在尝试增加一个延迟的切换“幻灯片”，但它似乎并没有增加。

这是我的小提琴

这是我的密码

 $(function () {
        $(".expand").on("click", function () {
            $(this).next().slideToggle();

                if ($(this).next().css("display", "block")) {



                    $(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');


            }

            $expand = $(this).find(">:first-child");


            if ($expand.text() == "\u25B6") {
                $expand.text("\u25BC");


            } else {
                $expand.text("\u25B6");
            }
        });

    });

Answer 1

试试这个：

$(this).next().children('#slidinghold').delay(5000).queue(function(){
    $(this).toggleClass("slidein").dequeue();
});

小提琴

Answer 2

使用setTimeout而不是延迟。样本：

$(".expand").on("click", function () {

    $(".expand").next().children('#slidinghold').removeClass('active-expand');

    $(this).next().children('#slidinghold').addClass('active-expand');

    setTimeout(function () {
        $('.active-expand').next().children('#slidinghold').toggleClass('slidein');
    }, 500);
});

演示https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/

Answer 3

正如jQuery的文档所说

.delay()不是JavaScript本机setTimeout函数的替代品，它可能更适合于某些用例

因此，您可以使用window.setTimeout来实现这一点：

$(function() {
    function toggleClassDelay(element,class,delay) {
        window.setTimeout(function() {
            element.toggleClass(class)
        },delay);
    }
    $(".expand").on("click", function() {
        var el;
        $(this).next().slideToggle();

        if ($(this).next().css("display", "block")) {
            el = $(this).next().children('#slidinghold');
            toggleClassDelay(el,"slidein",5000)
        }
        $expand = $(this).find(">:first-child");
        if ($expand.text() == "\u25B6") {
            $expand.text("\u25BC");
        } else {
            $expand.text("\u25B6");
        }
    });

});