11

これは私のimgです。 <img src="one.png" id="one" onMouseOver="animateThis(this)">

ユーザーがjQueryを使用してカーソルを合わせたときに、この画像のsrcを「oneHovered.png」にゆっくりと変更したいと考えています。これを行うにはどのjQueryメソッドが最適ですか? 私が目にする多くの例では、CSS の背景を変更する必要があります。src 属性を直接変更するものはありますか?

4

4 に答える 4

26

最初に画像をフェードアウトし、最初のオプション パラメータを使用してフェードアウトの期間を制御することから始めることができます。フェードアウトが完了すると、匿名のコールバックが起動し、画像のソースが新しいものに置き換えられます。その後、ミリ秒単位で測定される別のデュレーション値を使用して、画像をフェードインします。

元の HTML:

<img src="one.png" id="one" />

JavaScript:

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

最後に、jQuery を使用すると、HTML 自体で JavaScript 属性を使用しなくても、JavaScript イベントを動的にバインドすることがはるかに簡単になります。元のimgタグを変更して、属性srcとid属性だけを追加しました。

jQuery ホバーイベントは、ユーザーがマウスで画像の上にカーソルを置いたときに関数が確実に起動するようにします。

詳細については、jQuery fadeOutおよびjQuery fadeInも参照してください。

画像の読み込み時間に関して考えられる問題:

ユーザーが初めて画像にカーソルを合わせてリクエストを行った場合、実際のフェードインにわずかな不具合が発生する可能性があります。これは、newImage.png をリクエストしている間にサーバーからの遅延が発生するためです。これを回避するには、このイメージをプリロードします。画像のプリロードに関する StackOverflow に関するリソースがいくつかあります。

于 2012-05-06T23:18:17.250 に答える
1

min-height@jmort253 に加えて、フェードアウトする前にを追加していただけると嬉しいです。そうしないと、特にレスポンシブ画像でぎくしゃくすることがあります。

私の提案は

$('#one').hover(function() {
    // add this line to set a minimum height to avoid jerking
    $('#one').css('min-height', $('#one').height());
    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});
于 2014-06-06T00:40:44.563 に答える
0

jquery を使用して画像ソースを変更すると、読み込みに時間がかかり、ちらつきが発生します。問題を解決するために上記のコードを修正しました。

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() {
  $(".list-images-product .thumbnail").attr("src",newsrc);
  $(".list-images-product .thumbnail").on('load', function(){
    $(".list-images-product .thumbnail").fadeTo(500,1);
  });
 });
于 2016-10-19T14:46:45.673 に答える