如何在document.ready(function）时运行隐藏函数和动画

How to run a hide function and an animation when document.ready(function)

本文关键字：运行 隐藏 函数 动画 function document ready      更新时间：2024-02-15

这是我的第一个问题，因为我找不到类似的问题。因此，当我的页面准备就绪时，我尝试隐藏一些元素以及动画。它只是不起作用。对不起我的英语，我对Jquery也很陌生。在这里你可以看到代码：

$(document).ready(function(){
   $("#mainbox-search-main").show();
   $("#mainbox-search-extra").hide();
   $("#mainbox-login").hide();
   $("#mainbox-register").hide();
   $("#mainbox-pasfor").hide();
   $(".fab").animate({
      -webkit-transition-duration: 1s /* Safari */
      transition-duration: 1s
      -ms-transform: rotate(180deg) /* IE 9 */
      -webkit-transform: rotate(180deg) /* Safari */
      transform: rotate(180deg)
   });
});

如果没有 JSFiddle： http://www.jsfiddle.net，很难复制它

但是，为了方便自己，只需添加一个具有这些属性的类：

杰奎里 

$(".fab").addClass('animate-it');

.CSS

.animate-it{
  -webkit-transition-duration: 1s /* Safari */
  transition-duration: 1s
  -ms-transform: rotate(180deg) /* IE 9 */
  -webkit-transform: rotate(180deg) /* Safari */
  -moz-transform: rotate(180deg) /* Firefox */
  transform: rotate(180deg)
}

此外，在加载文档时，您实际上不需要隐藏任何元素。只需最初将这些显示设置为 none .

#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{
  display:none;
}

如果要显示它们，只需使用用于#mainbox-search-main元素的show()方法。

解决不必要的滞后时间

我还想指出，您可能希望为动画添加延迟，以防动画触发和 DOM 被视为已加载之间存在一些不希望的滞后时间。

$(".fab").delay(500).addClass('animate-it');

结论：添加回调函数

由于隐藏的元素在 CSS 中得到了处理，因此我们可以使用的代码量更短。要确保在显示 #mainbox-search-main 元素后发生动画，请尝试向其添加回调函数：

$(document).ready(function(){
   $("#mainbox-search-main").show(function(){
      $(".fab").delay(500).addClass('animate-it');
   });
});
相关文章：