web-dev-qa-db-ja.com

JQueryで変化する画像をゆっくりと変更/フェード/アニメーション化

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

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

jqueryimagejquery-animatefadesrc
11
zafrani

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

元の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 hover イベントは、ユーザーがマウスで画像にカーソルを合わせたときに関数が確実に起動するようにします。

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

画像の読み込み時間に関する問題の可能性：

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

22
jmort253

これを試して

<img class="product-images-cover" src="~/data/images/productcover.jpg" />
<div class="list-images-product">
 <div>
   <img class="thumbnail" src="~/data/images/product1.jpg" />
 </div>
 <div>
   <img class="thumbnail" src="~/data/images/product2.jpg" />
 </div>
</div>

$(document).ready(function () {
    $(".list-images-product .thumbnail").click(function (e) {
        e.preventDefault();
        $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250);
    });
});
2
November Man

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

私の提案は

$('#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);
    });

});
1
Kamrul

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);
  });
 });
0
Aamir Hussain