我知道我需要在 div 上使用悬停功能,然后更改 images src 属性,但我不知道如何使其从一个溶解到另一个。如果我隐藏它,它只会从白色淡出。但我希望它能够将图像分解为图像。
问问题
63 次
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
特性
于 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 回答