我认为jQuery将是用来实现这一目标的库。我当然能弄清楚如何在鼠标悬停时切换图像的源,然后在鼠标悬停时切换回来。但是我怎样才能通过图像的渐变来达到这种效果呢?
我已经尝试过使用jQuery循环插件来实现这一点,但我没有成功。我觉得也许有更简单的方法。我很感激你的帮助,有什么想法吗?
将图片放到div中,并将div的背景设置为第一个图片。在DIV中添加一个图像标签,并将SRC指向第二张图像。
现在你可以摆弄IMG的不透明度,在不需要交换任何东西的情况下暴露背景图像。
使用.opacity ()
确保在包装器DIV上设置了尺寸,否则它会在内部图像的不透明度为零时消失。
<div class="wrapper">
<img src="..." />
</div>
CSS3正在添加一堆过渡属性来处理这样的事情,但目前如果你设置使用jQuery,你可以使用.animate
函数结合mouseenter
和mouseleave
。
的例子:
$('img')
.mouseenter(function() {
$(this).stop(true,true).animate({ opacity: 0.5 }, 2000);
});
.mouseleave(function() {
$(this).stop(true,true).animate({ opacity: 1 }, 2000);
});
.stop
将清除之前的动画并使其完成,以便如果用户将鼠标快速悬停在元素上几次,它不会让动画在长队列中建立。
你可以试试这个
$(function(){
$("imageSelector).mouseover(function(){
$(this).data("oldSrc", this.src).attr("src", "newSource").stop().fadeT0(500, 1);
}).mouseout(function(){
$(this).attr("src", $(this).data("oldSrc")).stop().fadeTo(500, 0.5);
});
});