等3秒钟之前功能

Question

我已经看了一些解决方案在这里，但似乎没有工作。基本上，我正在使用一个隐藏的类。我写了Javascript，去除了隐藏的类，并添加了animate.css中的“动画脉冲”类。我怎么能这样做，以便在页面加载3秒之后，JS不会执行该功能？

<style> 

.hidden { 
    display: none; 
} 

#gallery { 
    -webkit-animation-duration: 2s; 
    -webkit-animation-delay: 3s; 
} 

</style> 

... end head, start body ... 

<h2 class="hidden" id="gallery">Testing 123 456 789 Testing</h2> 

... skip to bottom ... 

<!-- Code that is not working --> 

<script> 

$("document").ready(function() { 
    $(this).data('timeout', setTimeout(function() { 
     $("gallery").removeClass("hidden").addClass("animated pulse"); 
    }, 3000)); 
}); 

</script> 

Answer 1

约

$(document).ready(function() { 
    setTimeout(function() { 
     $("#gallery").removeClass("hidden").addClass("animated pulse"); 
    }, 3000)); 
}); 

一如既往@A什么。沃尔夫提到，您可以使用

$("#gallery").toggleClass("hidden animated pulse"); 

Answer 2

我怎么能有它，这样的JS不与功能的经历，直到页面加载后3秒了吗？

jQuery的方式™推迟一些脚本执行与.delay()和.queue()。另外请注意，您所说的“页面加载”不是“文档准备”，两者之间存在显着差异。如果你想要加载图像，一定要听取.load。

// page load version 
$(window).on('load', function() { 

// document ready vresion 
jQuery(function ($) { 

    // rest of the function body remains the same: 
    $('#gallery') 
     .delay(3000) 
     .queue(function (next) { 
      $(this).removeClass('hidden').addClass('animated pulse'); 
      next(); 
     }); 
});