-1

我知道我需要在 div 上使用悬停功能,然后更改 images src 属性,但我不知道如何使其从一个溶解到另一个。如果我隐藏它,它只会从白色淡出。但我希望它能够将图像分解为图像。

4

3 回答 3

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);
    }
  });
});
于 2013-01-23T16:24:15.537 回答
0

使用 jQuery UI 库——尤其是它的show特性

jQuery 用户界面

于 2013-01-23T16:26:04.583 回答
0
      <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");
于 2013-01-23T16:28:39.240 回答