blocks|key|3029851|text|为了首先显示元素，您必须隐藏它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3029852|$("#element").hide();
$("#element").show(1000);|code-block|syntax|javascript|3029853|这应该能解决你的问题。|3029854|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In order to show element first you have to hide it.</p>

<pre><code>$("#element").hide();
$("#element").show(1000);
</code></pre>

<p>This should solve your problem.</p>


blocks|key|3029856|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3029857|$('#element').fadeToogle(500);|code-block|syntax|javascript|3029858|您还可以通过更改毫秒来更改时间限制，就像我将500放在|offset|length|style|CODE|3029859|entityMap^0|0|0|M|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try this:</p>

<pre><code>$('#element').fadeToogle(500);
</code></pre>

<p>you can also change the time limit by changing the milliseconds as I've put <code>500</code></p>


blocks|key|2247261|text|我个人会在CSS中使用display:+none。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2247262|并在JavaScript上显示|2247263|$(this).fadeIn("fast");|2247264|在慢速设备上，如果使用.hide()，它仍然会在很短的时间内显示元素，因为JavaScript并不快。它依赖于您的设备/浏览器的性能，所以更好地坚持使用display:+none。|2247265|entityMap^0|B|D|0|0|0|N|0|B|7|24|D|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|M|$]]

<p>I personally would use <code>display: none</code> in CSS.</p>

<p>And show it with JavaScript </p>

<p><code>$(this).fadeIn("fast");</code></p>

<p>On slow devices it still would show the element for a short time, if you use <code>.hide()</code> instead, because JavaScript isn't fast. It relies on your device/browser's performances so better stick with <code>display: none</code>.</p>


blocks|key|1580803|text|如果您希望在此基础上构建并在某个时候具有更复杂的动画，那么toggleClass可能是值得研究的；这将在元素上切换一个css类，这样您就可以在衰落时添加类似大小更改的内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1580804|$('#element').toggleClass('my-class');|code-block|syntax|javascript|1580805|将收缩和淡出元素的css类：|1580806|.my-class+{
++transform:+scale(0.5);
++opacity:+0.0;
++transition:+100ms+all;
}|1580807|您也需要在css中为transition:+100ms+all添加#element，这样当类被切换并且元素消失时动画就平滑了。|1580808|entityMap^0|T|B|0|0|0|0|A|L|X|8|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>If you'd like to build on this and have a more complex animation at some point, <code>toggleClass</code> may be worth looking into; this will toggle a css class on the element so you could add something like a size change while fading:</p>

<pre><code>$('#element').toggleClass('my-class');
</code></pre>

<p>A css class that would shrink and fade the element:</p>

<pre><code>.my-class {
  transform: scale(0.5);
  opacity: 0.0;
  transition: 100ms all;
}
</code></pre>

<p>You would want to include <code>transition: 100ms all</code> on the css for <code>#element</code> as well so that the animation is smooth when the class is toggled off and the element fades back in.</p>


blocks|key|2247307|text|如果您不想使用任何类或任何自定义的css方法，这是您可以尝试的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2247308|这个例子假设您的元素是，而不是处于隐藏状态的，所以当页面完成加载之后，js会隐藏它，然后淡入，就会显示出来。希望它能帮上忙..。|offset|length|style|BOLD|2247309|​|2247310|$('document').ready(function(){
++$('#div1').toggle().fadeIn(2000);
});|code-block|syntax|javascript|2247311|<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>|2247312|2247313|entityMap^0|0|B|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>If you don't want to use any class or any custom css approach this is something you can try.</p>

<p>This example assume your element is <strong>not in hidden state</strong> so it will be hidden by js when page done loading and then fade in will bring it into picture.. :D
Hope it helps..</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('document').ready(function(){
  $('#div1').toggle().fadeIn(2000);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="div1" style="background:red;height:200px;width:200px"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm working on a project and I wanted to have a sort of fade effect on an element on my page, That if the page loads these elements comes in with a fade-in effect. I tried something very simple in jquery like <code>$("#showEffect").show(1000);</code> But that doesn't work. How can I add these effect to my element?</p>


Jquery element load effect on page

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

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

问Jquery元素加载对页面的影响
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery元素加载对页面的影响EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery元素加载对页面的影响
EN