Question

(Hi guys) I am trying to create a scenario where <li> elements fade in and fade out one after another – which I can get to work.

I am also trying to stop the animation process when I hover over an <li> element that is currently being animated – which I can also get to work.

However I am having trouble being able to show an <li> element once it has been set to display:none, instead I have to wait for the animation to cycle through.

This is my current HTML markup;

<div id="content">
    <li class="one">one</li>
    <li class="two">two</li>
    <li class="three">three</li>
</div>

However I thought if I could nest the <li> elements within a which does not get hidden by my jQuery, then I could set the <li> element back to display:block when I mouse over the <div>.

Suggested markup;

<div id="content">
    <div class="wrap"><li class="one">one</li></div>
    <div class="wrap"><li class="two">two</li></div>
    <div class="wrap"><li class="three">three</li></div>
</div>

However with my jQuery pasted below you can see that it only treats the <li> elements if they are siblings of #content and not if they are nested.

jQuery(document).ready(function($) {
    $('#content li').hide();
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeIn(1500).delay(5000).fadeOut(1500, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).fadeIn(500).stop(true, true);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });

});

For the sake of an example I have created a Fiddle of the current animation in sequence below;

http://jsfiddle.net/pusher/TuGES/1/

Any help is always appreciated.

Thank you!

Answer 1

To allow a mouseover on the hidden elements, you have to not use fadeOut() because that leaves the item as display: none which won’t receive mouse events. Instead, you need to leave it with an opacity of 0 which means you need to use fadeTo(). Here’s a fixed version of the code (with time intervals shortened for testing).

I’ve fixed it so it has the following behavior:

• When you mouseover an item that is fading out, it pops back to full visibility and all animation stops.
• When you mouseover an item that is fading in, it pops to full visibility and all animation stops.
• When you mouseover an item that was visible, it holds that item as visibility and no animation starts.
• When you mouseout of an item, it starts the animation.
• When you mouseover a hidden item, it shows that one immediately and hides all others.

One of the keys to the fix was to stop all animation and .hide() all other elements (that may have been animating) because that’s the normal finished state of .fadeOut() which will allow the animation to start up again it’s normal way. After hiding all elements, we show the current one and set it’s opacity to 1 to get it in the fully visible state.

jQuery(document).ready(function($) {
    $('#content li').css("opacity", 0);
    InOut($('#content li:first'));

    function InOut(elem) {
        elem.delay().fadeTo(1500, 1).delay(1000).fadeTo(1500, 0, function() {
            if (elem.next().length > 0) {
                InOut($(this).next());
            }
            else {
                InOut($(this).siblings(':first'));
            }

        });
    }

    $('#content li').mouseover(function() {
        $(this).siblings().add(this).stop(true, false).css("opacity", 0);
        $(this).show().css("opacity", 1);
    });
    $('#content li').mouseout(function() {
        if ($(this).is(":visible") == true) {
            InOut($(this));
        }
    });
});​

And, here’s a working demo: http://jsfiddle.net/jfriend00/k4ASz/

P.S. I had to update your CSS a bit too because with all items in the page at all times, the layout is a bit different.