Fade in divs one after another

前端未结

关注

 5  977

Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I\'m looking to make 3 divs fade in on page load one after another. So

相关标签:

5条回答

日久生厌

2021-01-03 14:31
The fade in command contains a call back function, see documentation. This means you could chain the events.
```
<script type="text/javascript">
    $('#1, #2, #3').hide();

   $('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2021-01-03 14:32

Here is a cleaner and generic way to achieve this effect: check it out on http://jsfiddle.net/BztLx/20/

Logic trick relies on the callback functionality of the fadeIn and using .eq() as an iterator over the selected elements.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {

    display = typeof display !== 'undefined' ? display : "block";

    var els = $(selectorText), i = 0;

    (function helper() {
        els.eq(i++).fadeIn(speed, helper).css("display", display);
        if (callback && i === els.length) callback();
    })();
}

sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
    console.log("I am just an optional callback");
});
});
</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>

0 讨论(0)

花落未央

2021-01-03 14:35

Using the Delay function as following:

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().delay(1500).fadeIn(1500);
    $('#3').hide().delay(3000).fadeIn(1500);
</script>

0 讨论(0)

心在旅途

2021-01-03 14:41
You can .delay() each so the one before fades in at the right time, for example:
```
$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});
```
This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.

Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:
```
$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});
```
Then you require zero maintenance on the JavaScript side to add additional <div> elements to fade.
0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2021-01-03 14:41

<script type="text/javascript">
    $('#1').hide().fadeIn(1500, function(){
        $('#2').hide().fadeIn(1500, function(){
             $('#3').hide().fadeIn(1500);
        });
    });
</script>

0 讨论(0)