ToggleClass 没有添加 Jquery 延迟？

Question

我正在尝试为 toggleclass 添加延迟 'slidein' 但是它似乎并没有添加到它。

这是我的 fiddle

这是我的代码；

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

使用 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 2

试试这个：

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

Fiddle

Answer 3

如jQuery's doc

所述

.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases

所以你可以使用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");
        }
    });

});

ToggleClass 没有添加 Jquery 延迟？

ToggleClass not adding Jquery Delay?

javascript

jquery

html

css

toggleclass