Question

我认为jQuery将是用来执行此操作的库。我当然可以弄清楚如何在鼠标悬停时切换图像的来源，然后在mouseout上将其切换回来。但是，如何通过淡入淡出图像来实现这种效果呢？

我已经尝试使用jQuery Cycle插件实现这一点，但我没有成功。我觉得也许有一种更简单的方法可以做到这一点。我很感激帮助，任何想法？

Answer 1

将图像放入DIV并将DIV的背景设置为第一张图像。将图像标记放在DIV中并将SRC指向第二个图像。

现在你可以摆弄IMG的不透明度，将背景图像暴露在它背后而不必交换任何东西。

使用.opacity（）

确保将尺寸放在包装DIV上，否则一旦内部图像的不透明度变为零，它就会消失。

<div class="wrapper">
   <img src="..." />
</div>

Answer 2

CSS3正在添加一堆过渡属性来处理这样的事情，但目前如果你开始使用jQuery，你可以使用.animate函数和mouseenter以及{ {1}}。

示例：

mouseleave

$('img') .mouseenter(function() { $(this).stop(true,true).animate({ opacity: 0.5 }, 2000); }); .mouseleave(function() { $(this).stop(true,true).animate({ opacity: 1 }, 2000); });将清除上一个动画并使其完成，这样如果用户将多次快速悬停在元素上，则不会让动画在长队列中累积。

Answer 3

你可以试试这个

$(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);
  });
});

使用javascript褪色图像鼠标悬停和鼠标移除效果的最佳方法是什么？

3 个答案: