jQuery dynamic changing image header
<p>Iam trying to write a simple jQuery function to change the image header of my webpage.</p>

<p>The HTML looks like this:</p>

<pre><code>&lt;div class="slider"&gt; 
&lt;ul&gt;
&lt;li&gt; &lt;img src="img/slide21.png" alt=""&gt; &lt;/li&gt;
&lt;li&gt; &lt;img src="img/slide31.png" alt=""&gt; &lt;/li&gt;
</code></pre>

<p>
  </p>

<p>I just want to fade in the next image every 5 seconds and fade out the old.
The position of the image should not change and all images are the same size.</p>

<p>My js code looks like this:</p>

<pre><code>function menu (obj) {
if (!obj.length) {
  return;
}
  $(obj).find("li").hide();
  $(obj).find("li").next().fadeIn(2400);
}
 $(document).ready(function () {
   menu(".slider");
 });
}
</code></pre>

<p>This code is really not what I want but currently I have no idea how to do this.</p>

<p>Any help would be appreciated!
Thanks!</p>
