javascript - div にカーソルを合わせると、その中の画像が別の画像に溶けるように、jQuery をどのようにコーディングすればよいですか?

Question

div で hover 関数を使用してから、画像の src 属性を変更する必要があることはわかっていますが、一方から他方にディゾルブする方法がわかりません。非表示にすると、白からフェードインします。しかし、私はそれを画像から画像へと分解したいと思っています。

Answer 1

次のjqueryチュートリアルを使用します。

http://jqueryfordesigners.com/image-cross-fade-transition/

HTML

<div class="fade">
  <a href="/info.html"><img src="start.jpg" /></a>
  <div>
    <a href="/info.html"><img src="end.jpg" /></a>
  </div>
</div>

CSS

明らかに、複数のフェード画像がある場合は、IDまたは代替クラスを使用して上部と左側のCSSプロパティを配置します。

.fade {
  position: absolute;
  top: 100px
  left: 100px
}

.fade div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

jQuery

// when the DOM is ready:
$(document).ready(function () {
  // find the div.fade elements and hook the hover event
  $('div.fade').hover(function() {
    // on hovering over, find the element we want to fade *up*
    var fade = $('> div', this);

    // if the element is currently being animated (to a fadeOut)...
    if (fade.is(':animated')) {
      // ...take it's current opacity back up to 1
      fade.stop().fadeTo(250, 1);
    } else {
      // fade in quickly
      fade.fadeIn(250);
    }
  }, function () {
    // on hovering out, fade the element out
    var fade = $('> div', this);
    if (fade.is(':animated')) {
      fade.stop().fadeTo(3000, 0);
    } else {
      // fade away slowly
      fade.fadeOut(3000);
    }
  });
});

Answer 2

jQuery UI ライブラリを使用する - 特にそのshow機能

jQuery UI

Answer 3

      <div class="hoverme"><img class="still" src="..." /><img class="hstate" src="..." /></div>

css、divの高さ/幅を設定&

        .hoverm {position:relative; width:100px;height:100px;}

       .hoverme img {display:block;position:absolute;top:0;left:0;}
       .hoverme img.hstate {display:none;}

js

       $(document).on({"mouseover":function() {
                          $(this).find(".hstate").stop().fadeIn(500);
                          },
                       "mouseout":function() {
                          $(this).find(".hstate").stop().fadeOut(500);
                       }, ".hoverme");