什么是最好的方法做一个javascript褪色图像鼠标悬停和鼠标移出效果

What is the best way to do a javascript faded image mouseover and mouseout effect?

本文关键字：鼠标 图像 褪色 javascript 悬停 移出 一个 方法 什么      更新时间：2023-09-26

我认为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);
  });
});
相关文章：