1

私のコードは機能しますが、2 番目の画像に直接フェードしません: 最初の画像をフェードアウト -> 遅延 -> 2 番目の画像をフェードインします。2 番目の画像に直接フェードするにはどうすればよいですか?

私のjqueryコード

$(document).ready(function() {
    var std = $(".fadeim").attr("src");
    var hover = std.replace(".png", "-hover.png");
    $(".fadeim")
        .mouseover(function() {   
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", hover);  
                $(this).fadeIn("fast");  
            });  
        })  
        .mouseout(function() {  
            $(this).fadeOut("fast",function(){  
                $(this).attr("src", std);  
                $(this).fadeIn("fast");           
            });  
        })  
    }); 
});
4

5 に答える 5

3

次のことができます[私が通常行うこと]:

私のテスト用リンクをチェックできます: http://jsfiddle.net/fJFmx/1/

画像のコンテナー [幅と高さを固定] を設定しました。画像のスタイルを position:absolute および固定サイズに設定します。

HTML の例:

<div id='slideContainer'>
    <img src='http://www.ct4me.net/images/dmbtest.gif' />
    <img src='http://pievscake.com/images/test.jpg' />
</div>

次に、Jquery:

$(function() {

    $('#slideContainer img:first').fadeIn();

    $('#slideContainer').hover(function() {
        $('#slideContainer img:first').fadeOut();
        $('#slideContainer img:last').fadeIn();
    }, function() {
        $('#slideContainer img:first').fadeIn();
        $('#slideContainer img:last').fadeOut();
    });

});

CSS

#slideContainer {border:1px solid #ffcc00;width:50px; height:50px;}
#slideContainer img {position:absolute; width:50px; height:50px; display:none;}

お役に立てれば。

于 2011-09-02T08:24:46.993 に答える
2

（CSSの絶対/相対配置を介して）2つの要素を重ねて配置する必要があります。そうすると、上の要素の不透明度を下げて、下の要素にフェードインしているように見せることができます。

フェードアウトが完了したら、画像のSRC属性をすばやく切り替え（ユーザーは気付かない）、次のサイクルの準備をします。

このHTMLをお勧めします（幅と高さを1か所で設定するだけで、子は親のサイズに適応するため）：

<div id='slideContainer' style='width:50px; height:50px; position: relative;'>
     <img src='hover.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
     <img src='original.jpg' style='position:absolute; top:0px; right:0px; bottom:0px; left: 0px; display:none;' />
</div>
于 2011-09-02T08:16:15.887 に答える
2

誰かが JavaScript をオフにしている場合、画像は変更されないため、代わりに CSS3 を使用することをお勧めします。この CSS を試してください:

.fadeim {
    width: 200px;
    height: 100px;
    background: url(std.png) center center no-repeat;
    -webkit-transition: background 500ms linear;
    -moz-transition: background 500ms linear;
    transition: background 500ms linear;
}

.fadeim:hover {
    background: url(std-hover.png) center center no-repeat;
}

上記のコードは、画像が 200×100px であることを前提としています。幅と高さの設定を画像と同じサイズに変更する必要があります。したがって、この CSS が適用されたページを開くと、画像が表示され、カーソルを合わせると、画像が別の画像にフェード インします。これは現在、WebKit (Chrome と Safari) と Mozilla (Firefox) でのみ機能するため、誰かがサポートされていないブラウザーを使用した場合、ページはまったく同じように動作しますが、画像は色あせずにすぐに変更されます。

Ad@m

于 2011-09-02T08:29:06.130 に答える
1

問題を解決する方法：

Rok Kraljが言ったように、2番目の画像を事前にロードします。必要なときに2番目にロードしないでください。

そうしないと、ブラウザがサーバーからフェッチするのを待つ必要があります

より良い方法

1つの画像をsrcとして設定し、もう1つの画像をparentNodeのbackground-imageとして設定します。画像のみをアニメーション化します。

ユーザーは空白のギャップを必要としないため、エクスペリエンスを向上させるために変換が必要です。

于 2011-09-02T08:35:10.077 に答える
1

「最初の」画像にカーソルを合わせている間、2 番目の画像はまだロードされていません。

この方法を試してください：

$('.fadeim').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".png", "-hover.png");  

    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadeim').siblings().css({
        zIndex: '1',
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });

});

フィドルのデモ

于 2011-09-02T08:51:11.577 に答える