0

マウスの入力時に1つの画像を2番目にフェードさせ、マウスを離すと逆にしようとしています。私が望む効果は、http://mango.comの製品画像のいずれかで見つけることができます。以下にスクリプトを示します。

<div id="fade">
    <img src="two.gif" width="100" height="100" id="two1" class="after" style="display:none;"/>
    <img src="one.gif" width="100" height="100" id="one1" class="before" />
</div>
<div id="fade">
    <img src="two.gif" width="100" height="100" id="two2" class="after" style="display:none;" />
    <img src="one.gif" width="100" height="100" id="one2" class="before" style="" />
</div>
<script type="text/javascript">
$('#one1,#one2').mouseenter(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
$('#two1,#two2').mouseleave(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
</script>

一度フェードしますが、次は両方の画像が消えます。誰でもコードを投稿したり、同じように機能するコード/プラグインへの参照を提供したりできます。

4

4 に答える 4

2

あなたが持っている場所

$('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).prev('img').fadeIn(500);
});

あなたが持っている必要があります

$('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).next('img').fadeIn(500);
});

マウスリーブで「次へ」を「前へ」に切り替えるのを忘れただけです。

于 2012-05-16T04:48:03.913 に答える
1

これを試して。

$('#one1,#one2').mouseenter(function(){
    $(this).fadeOut(500);
    $(this).parent().find('.after').fadeIn(500);
});

$('#two1,#two2').mouseleave(function(){
    $(this).fadeOut(500);
    $(this).parent().find('.before').fadeIn(500);
});

http://jsfiddle.net/g5XF2/の例

于 2012-05-16T04:51:31.147 に答える
1

mouseleave イベント関数で prev() の代わりに next() を使用する

        $(document).ready(function()
        {
            $('#one1,#one2').mouseenter(function()
            {
                $(this).fadeOut(500);
                $(this).prev('img').fadeIn(500);
            });

            $('#two1,#two2').mouseleave(function()
            {
                $(this).fadeOut(500);
                $(this).next('img').fadeIn(500);
            });
        });
于 2012-05-16T04:52:46.643 に答える
0 
$('#one1,#one2').mouseenter(function() {
    $(this).fadeOut(500, function() {
       $(this).prev('img').fadeIn(500);
    });

});
$('#two1,#two2').mouseleave(function() {
    $(this).fadeOut(500, function() {
      $(this).next('img').fadeIn(500);
    });
});​

デモ

于 2012-05-16T05:12:44.080 に答える