jQuery: Fade in an image when you hover over it.

Question

So I have a cycle of images which when not messed with cycle through, each subsequent image fades in nicely.

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

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

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

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

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

so here's the markup:

<div id="s1" style="z-index:100">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
</div>

<ul id="nav">
  <li id="nav1"><a href="#" onmouseover="changeSlide(0)" 
                      onmouseout="continueSlide(0)">Text1</a></li>
  <li id="nav2"><a href="#" onmouseover="changeSlide(1)" 
                      onmouseout="continueSlide(1)">Text2</a></li>
</ul>


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

    }); 
});

</script>

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.

Answer 1

The fadeTo function allows you to fade in/out elements controlling the opacity.

You could trigger opacity change with the hover function:

$('#s1 img').hover(
  function(){
    $(this).fadeTo('slow', 1);
  },
  function(){
    $(this).fadeTo('slow', 0.6);
});

Check this example.