Fading in/out a jquery list

Question

I\'m trying to write a jquery function that loops through an unordered list (the ul element having the id \"intro\") and individually fades in and fades out each element. This

Answer 1

I think you are not selecting the li like you want. Try like this:

<script type = "text/javascript">
        function startAnimations(){

            var list = $("#intro li");
            list.hide();
            list.each(function(index) {
                $(this).fadeIn(3000, function(){
                    $(this).fadeOut(3000);
                });

            });
        }
    </script>

The first parameter of this "each" function is not the element itself. It is the index

Answer 2

You can use:

function fadeLi(elem) {
    elem.delay().fadeIn().delay(1500).fadeOut(500, function () {
        if (elem.next().length > 0) {
            fadeLi(elem.next());
        } else {
            fadeLi(elem.siblings(':first'));
        }
    });
}

$(function () {
    $('#intro li').hide();
    fadeLi($('ul li:first'));
});

Fiddle Demo

Answer 3

Most of these look like good solutions. I may be reading into your question, but I'm assuming the advantage of fading each in & out individually is so you can stagger the transitions.

If that's the case, I'd recommend using jQuery's .delay() method:

https://api.jquery.com/delay/

I've forked the jsfiddle @arun made to show you how it could be done:

http://jsfiddle.net/Lgwm8/1/

function startAnimations() {
  var list = $("#intro li");
  list.hide();
  list.each(function (i, li) {
    $(li).delay(i * 500).fadeIn(3000, function () {
      $(li).fadeOut(3000);
    });
  });
}
startAnimations();

Answer 4

Try

function startAnimations() {
    $("#intro li").hide();

    function loop() {
        var $li = $("#intro li:first-child").fadeIn(3000, function () {
            $li.fadeOut(3000, function () {
                $li.appendTo('#intro');;
                loop()
            })
        });
    }
    loop()
}

Demo: Fiddle

Answer 5

function startAnimations(){

             $("#intro").hide();

            $("#intro li").each(function() {
                 var _this = $(this);

                _this.fadeIn(3000, function(){
                    _this.fadeOut(3000);

                });

            });
        }