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

Question

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

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

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

但缺点是：

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

可能吗？

Answer 1

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

Answer 2

您应该对元素使用类属性。您可以访问和控制具有特定类的所有元素，您无需指定每个元素的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);
});

Answer 3

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

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

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