javascript - 我应该如何编码我的 jQuery，以便当我将鼠标悬停在我的 div 上时，其中的图像会溶解到另一个图像中？

Question

我知道我需要在 div 上使用悬停功能，然后更改 images 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 用户界面

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");