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

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

<强> JQuery的

$(".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;
}

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

解决不必要的延迟时间

我还想指出，如果在动画触发之间存在一些不需要的延迟时间，并且认为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');
   });
});

如何在document.ready（function）下运行隐藏功能和动画

1 个答案: