CODEWITHSUNDEEP
javascriptjqueryhtml
nixnotwin
nixnotwin

Reputation: 2403

Jquery: Sequential fade in, fade out a list and looping

Here is the html:

<ul class="uii" id="fds">

    <li class="lii">One</li>

    <li class="lii">Two</li>

    <li class="lii">Three</li>

    <li class="lii">Four</li>

</ul>

Js:

$(function() {
     setInterval(function () {
      $('#fds li').each(function (i) {

    $(this).delay((i++) * 1000).fadeTo(2000, 1); 
    $(this).delay((i++) * 1000).fadeOut(2000);
    });
}, 10000);
});

css:

.uii {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
    font-size: 50px;
    width: 40%;

}

.uii li { opacity: 0; list-style: none; }

.lii {
    padding: 35px;
    margin-bottom: 10px;
    z-index: 1000;
    position: auto;
    background: #CBBFAE;
    background: rgba(190,176,155, 0.4);
    border-left: 4px solid rgba(255,255,255,0.7);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);   
    opacity: 0;
    color: #fff;

    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}

Items should appear one by one until the list is complete, after a considerable delay the items should fade out one by one from the beginning and there should be a considerable pause at the end. The issue I have with my code fadeout is quick and loop interval inter fears with fadein and fade out timing and results is chaos.

Upvotes: 0

Views: 1054

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388406

Try

function animate() {
    function fadeTo(lis, duration, opacity, callback) {
        if (!lis.length) {
            callback();
        }

        var $lis = $(lis.shift());
        $lis.delay(1000).fadeTo(duration, opacity, function () {
            fadeTo(lis, duration, opacity, callback);
        })
    }

    fadeTo($('#fds li').get(), 500, 1, function () {
        setTimeout(function () {
            fadeTo($('#fds li').get(), 500, 0, function () {
                setTimeout(animate, 5000);
            })
        }, 5000);
    })

}

animate();

Demo: Fiddle

Upvotes: 2

Nick M
Nick M

Reputation: 1666

Bit of an odd way, without callbacks. Still works, though.

var lis = $('li');
for(var i=0;i<=lis.length;i++) {
    var timer = setTimeout(function(){
        $(lis[i]).fadeTo(2000, 1); 
    },4000*i);
}
var waiting = setTimeout(function(){
    for(var i=0;i<=lis.length;i++) {
        var timer = setTimeout(function(){
            $(lis[i]).fadeTo(2000, 0); 
        },4000*i);
    }
},4000*i + 4000);

Upvotes: 0

Related Questions