Seuqentially FadeIn and FadeOut Elements Nested in DIVs
<p>(Hi guys) I am trying to create a scenario where <code>&lt;li&gt;</code> elements fade in and fade out one after another - <strong><em>which I can get to work.</em></strong> </p>

<p>I am also trying to stop the animation process when I hover over an <code>&lt;li&gt;</code> element that is currently being animated - <strong><em>which I can also get to work.</em></strong></p>

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

<h3>This is my current HTML markup;</h3>

<pre><code>&lt;div id="content"&gt;
    &lt;li class="one"&gt;one&lt;/li&gt;
    &lt;li class="two"&gt;two&lt;/li&gt;
    &lt;li class="three"&gt;three&lt;/li&gt;
&lt;/div&gt;
</code></pre>

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

<h3>Suggested markup;</h3>

<pre><code>&lt;div id="content"&gt;
    &lt;div class="wrap"&gt;&lt;li class="one"&gt;one&lt;/li&gt;&lt;/div&gt;
    &lt;div class="wrap"&gt;&lt;li class="two"&gt;two&lt;/li&gt;&lt;/div&gt;
    &lt;div class="wrap"&gt;&lt;li class="three"&gt;three&lt;/li&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>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 &gt; 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));
        }
    });

});
</code></pre>

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

<p><a href="http://jsfiddle.net/pusher/TuGES/1/" rel="nofollow">http://jsfiddle.net/pusher/TuGES/1/</a></p>

<p>Any help is always appreciated.</p>

<p>Thank you!</p>
