jQuery: Fade v obraze, keď vznášate nad ním - jquery

Mám teda cyklus snímok, ktoré, keď sa neprepletajú s cyklom, každý nasledujúci obrázok pekne mizne.

Ak umiestnim kurzor myši na obrázok, načíta sa (bez vyblednutia) a potom sa ostatné obrázky znova cyklujú a pekne sa zoslabujú.

Chcem urobiť to, že keď umiestnim kurzor myši na odkaz a objaví sa vhodný obrázok, chcem, aby sa tento obrázok tiež stratil a dokážem prísť na to, ako robiť niečo ako

Pred načítaním tohto konkrétneho obrázka nastavte jeho krytie na 0,6 a potom pomaly slabnite na 1,0.

Je teda možné v podstate vznášať kurzor myši nad odkazom, v tom okamihu nastaviť nepriehľadnosť a zoslabiť?

Ešte raz vďaka, chlapci, som mimochodom nováčikom jQuery, takže akékoľvek komentáre / pomoc sú veľmi vítané.

takže tu je označenie:

<div id="s1" style="z-index:100">
<img src="/images/1.jpg"/>
<img src="/images/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>

Snažil som sa zistiť, či by som mohol dať onBefore alebo niečo podobné týmto riadkom a volať funkciu fadeout, ale nedokážem to zistiť.

odpovede:

Na fadeTo Funkcia vám umožňuje zoslabovať / oddeľovať prvky ovládajúce opacity.

Dalo by sa vyvolať zmenu opacity pomocou vznášať sa funkcie:

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

check toto príkladom.