页面上的jQuery元素加载效果答案

【问题标题】：Jquery element load effect on page页面上的jQuery元素加载效果
【发布时间】：2017-10-16 00:16:05
【问题描述】：

我正在做一个项目，我想在我的页面上的一个元素上产生一种淡入淡出效果，如果页面加载这些元素就会产生淡入效果。我在 jquery 中尝试了一些非常简单的方法，例如 $("#showEffect").show(1000); 但这不起作用。如何将这些效果添加到我的元素中？

【问题讨论】：

在你的元素上尝试toggle。
或者你可以试试 jQuery 的 $('#showEffect').fadeIn(1000); （见api.jquery.com/fadein）
如果您提供有效的代码 sn-p 我们也许能够给出正确的答案

标签： javascript jquery html css

【解决方案1】：

为了首先显示元素，你必须隐藏它。

$("#element").hide();
$("#element").show(1000);

这应该可以解决您的问题。

【讨论】：

它确实解决了它！谢谢！我还需要 10 分钟才能接受答案
宁可使用 hide 与 js 手动隐藏元素尝试添加具有 display:none 属性的类，然后使用 $('#element').removeClass('class-for-hindinng').show(interval'); 以避免不必要的影响..
虽然有一件小事，当我添加$("#showEffect").toggle( "puff" ); 时，效果不起作用。它只是显示了标准的“折叠”效果。这是如何工作的？
使用.hide()，在 JavaScript 进入之前仍然可以快速看到该元素。这可能是慢速设备或浏览器的问题。

【解决方案2】：

如果您想在此基础上制作更复杂的动画，toggleClass 可能值得研究；这将在元素上切换一个 css 类，以便您可以在淡入淡出时添加诸如大小更改之类的内容：

$('#element').toggleClass('my-class');

一个可以缩小和淡化元素的 css 类：

.my-class {
  transform: scale(0.5);
  opacity: 0.0;
  transition: 100ms all;
}

您还希望在 #element 的 css 中包含 transition: 100ms all，以便在关闭类并且元素淡入时动画流畅。

【讨论】：

【解决方案3】：

如果您不想使用任何类或任何自定义 css 方法，您可以尝试一下。

这个例子假设你的元素没有处于隐藏状态，所以当页面加载完成时它会被 js 隐藏，然后淡入将把它带入图片.. :D 希望对你有帮助..

$('document').ready(function(){
  $('#div1').toggle().fadeIn(2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="background:red;height:200px;width:200px"></div>

【讨论】：

【解决方案4】：

试试这个：

$('#element').fadeToogle(500);

您还可以通过更改毫秒来更改时间限制，正如我所说的 500

【讨论】：

【解决方案5】：

我个人会在 CSS 中使用 display: none。

并用 JavaScript 展示它

$(this).fadeIn("fast");

在速度较慢的设备上，如果您改用.hide()，它仍会在短时间内显示该元素，因为 JavaScript 并不快。它依赖于您的设备/浏览器的性能，所以最好坚持使用display: none。

【讨论】：