fadein images proloaded with javascript
<p>image preloading code snippet :</p>

<pre><code>myimages=new Array()
function preloadimages(){
   for (i=0;i&lt;preloadimages.arguments.length;i++){
      myimages[i]=new Image()
      myimages[i].src=preloadimages.arguments[i]
    }
}

preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
</code></pre>

<p>jquery code to display preloaded images:</p>

<pre><code>$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
</code></pre>

<p>I used image preloading so that the first image in my slider does not take time to show up, but it does with a blank space instead and all the consequent images show up without showing any blank space. But I don't know how to fadeIn the images during display.</p>

<p>the following code</p>

<pre><code>$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');
</code></pre>

<p>shows an error in console:</p>

<pre><code>$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function
</code></pre>

<p>I want a slider the one in <a href="http://www.cisco.com/" rel="nofollow">http://www.cisco.com/</a></p>

<p>1) what should be the steps so that no blank space shows up at the very first time the slider begins? Putting code inside <code>$(document).ready(..</code> or not does nothing.</p>

<p>2) how to achieve the fadeIn effect?</p>

<p>3) In <a href="http://www.cisco.com/" rel="nofollow">http://www.cisco.com/</a>, for each image, the text on the image seems to be highlighted a bit after the rest part of the image. How to achieve that?</p>

<p><strong>EDIT</strong>:</p>

<p>after the image preloading snippet, the next segment follows:</p>

<pre><code>for (i=0; i&lt;n; i++){

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);



if(i==n-1){

i=0;
}
    }
</code></pre>

<p>that is all about the part of the slideshow I am interested to discuss here.</p>
