Jquery/javascript 在每个元素中淡入淡出？答案

【问题标题】：Jquery/javascript fade in each element?Jquery/javascript 在每个元素中淡入淡出？
【发布时间】：2013-10-22 03:23:01
【问题描述】：

默认情况下，一旦加载，图像和文本将依次淡入，但是有没有办法在加载后在“每个”元素上添加淡入淡出效果？

我可以使用下面的代码加载元素：

$("#element,#element2,#element3,#element4").fadeIn("slow");

但缺点是：

我必须指定页面中的所有元素，#div1,#div3,#container2.....
此外，元素只能在页面一起完成加载后淡入，但我想要的是在所有 html 完成加载之前淡入元素。

有可能吗？

【问题讨论】：

你知道上课吗？如果没有，我认为它会解决你的问题。我注意到你只使用 ids'

标签： javascript jquery load fadein

【解决方案1】：

我会给每个元素一个特定的类，然后用 $(".whatever") 引用它。您还可能会检查 $.each()，它遍历对象。要在页面加载时淡入，您需要放置代码，或者在文档 ready() 之外调用函数，靠近 html 的开头。

【讨论】：

【解决方案2】：

你应该为元素使用 class 属性。您可以访问和控制所有具有特定类的元素，您无需指定每个元素的 id。这是一个演示JSFIDDLE：

HTML：

<input type="button" id="btn_fade_out" value="Fade Out">
<input type="button" id="btn_fade_in" value="Fade In">
<br>    
<div class="my_class">Element 1</div>
<div class="my_class">Element 2</div>
<div class="my_class">Element 3</div>
    <img src="abc.png" height="50px" width="50px" border="1" class="my_class"></img>

JS：

$('#btn_fade_out').click(function(){
    $('.my_class').fadeOut(1000);
});

$('#btn_fade_in').click(function(){
    $('.my_class').fadeIn(1000);
});

【讨论】：

【解决方案3】：

最好的方法是为所有要在加载时淡入淡出的元素设置一个共同的类然后使用

$('.class').fadeIn(1000);

$('.class').fadeOut(1000);

【讨论】：