如何在 document.ready(function) 时运行隐藏功能和动画

Question

这是我的第一个问题，因为我找不到类似的问题。 所以，当我的页面准备好时，我尝试隐藏一些元素以及动画。 它只是不起作用。 对不起我的英语，我对 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)
   });
}); 

Answer 1

没有 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');
   });
});