Fade in delay on Load

你说的曾经没有我的故事 提交于 2020-01-02 05:22:07

问题


I've stumpled on something quite nice, I've wanted to use in some upcoming project.

It's an animated opacity on load, or you can call it fade in.

I wondered if you could link some elements together (ex. 3) so element2 only starts when element1 is finished, and element3 when no. 2 is?

Or should you define a delay on element2 and multiply the delay on element3?


回答1:


If you had divs, say class="faded", you could fade each in on load, each in a row like this:

$(".faded").each(function(i) {
  $(this).delay(i * 400).fadeIn();
});

You can view a demo of this effect here, or a slower version here. The 400 is for 400ms, the duration of the normal .fadeIn() speed :)

You can either use .hide() to hide them on page load, like this:

$(".faded").hide()

Or do it in the CSS:

.faded { display: none; }



回答2:


You could have the fadeIn on element2 begin at the completion callback time of element1:

 element1.fadeIn(500, function() {  
       element2.fadeIn(500, function() { 
            etc...



回答3:


Since I don't believe that these types of animation have anything in the way of a success callback, if you know how long an element will take to fade, you can use something like setTimeout() to fire off the next after the proper amount of time has passed.

Edit: I stand corrected.



来源:https://stackoverflow.com/questions/3133316/fade-in-delay-on-load

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!