jQuery: Fade in an image when you hover over it
<p>So I have a cycle of images which when not messed with cycle through, each subsequent image fades in nicely.</p>

<p>If I hover over an image, it loads (no fade) and then the rest of the images cycle again and fade in nicely.</p>

<p>What I want to do is, when I hover over a link, and the appropriate image appears, I want that image to fade in as well, and I can't figure out how to do something like</p>

<p>before loading this specific image, set its opacity to .6, then fade in slowly to 1.0.</p>

<p>So is it possible to basically, user hovers over a link, at that moment set the opacity of and fade it in?  </p>

<p>Thanks again guys, I'm a jQuery newbie by the way, so any comments/helps are much appreciated.</p>

<p>so here's the markup:</p>

<pre><code>&lt;div id="s1" style="z-index:100"&gt;
    &lt;img src="1.jpg"/&gt;
    &lt;img src="2.jpg"/&gt;
&lt;/div&gt;

&lt;ul id="nav"&gt;
  &lt;li id="nav1"&gt;&lt;a href="#" onmouseover="changeSlide(0)" 
                      onmouseout="continueSlide(0)"&gt;Text1&lt;/a&gt;&lt;/li&gt;
  &lt;li id="nav2"&gt;&lt;a href="#" onmouseover="changeSlide(1)" 
                      onmouseout="continueSlide(1)"&gt;Text2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


function changeSlide(slide) {
    $('#s1').cycle({
        fx: 'fade',
        startingSlide: slide,
        speed: 1500,
        timeout: 0
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 0
    });
}

function continueSlide(slide) {
    $('#s1').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        startingSlide: slide,
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    });
}
$(function() {

    $('#s1').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000
    });
    $('#props').cycle({
        fx: 'fade',
        speed: 1500,
        timeout: 5000

    }); 
});

&lt;/script&gt;
</code></pre>

<p>I was trying to see if I could put an onBefore or something along those lines and call a fadeout function, but can't figure it out. </p>
