jQuery：画像の上に置くとフェードイン

Question

私は、サイクルスルーで混乱していないときに、後続の各画像がうまくフェードインする画像のサイクルを持っています。

画像の上にカーソルを置くと、画像がロードされ（フェードしない）、残りの画像が再び循環してうまくフェードインします。

私は何をしたい私は、リンクにカーソルを合わせると、あり、そして適切な画像は、私はそのイメージが同様にフェードインしたい、表示された、と私は

ような何かをする方法を見つけ出すことはできませんこの特定のイメージをロードする前に、その不透明度を0.6に設定し、ゆっくりと1.0にフェードインします。

基本的に、ユーザーはリンク上を移動し、その瞬間に不透明度を設定してフェードインすることは可能ですか？

ありがとう、私は途中でjQuery初心者ですから、どんなコメントや助けも大歓迎です。

ので、ここでのマークアップです：

<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> 

私はこれらの線に沿ってonBeforeか何かを入れて、フェードアウト機能を呼び出すことができるかどうかを確認しようとしていたが、それを把握することはできません。

Answer 1

fadeTo機能を使用すると、不透明度を制御する要素をフェードイン/アウトすることができます。

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

チェックthis例：

あなたはhover機能付き不透明度の変化を引き起こす可能性があります。