ToggleClass не добавляет JQuery Delay?

Question

Я пытаюсь добавить задержку к слайду toggleclass, но, похоже, он не добавляет его.

вот мой 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

Попробуйте это:

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

Fiddle

Answer 2

использование комплектTimeout вместо задержки. Пример:

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

.delay() не является заменой для Javas Уроженец функция SetTimeout cript, которая может быть более подходящим для некоторых случаев применения

Таким образом, вы можете использовать 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"); 
     } 
    }); 

});