当前位置：文江博客话题详情

实现 JavaScript 褪色图像鼠标悬停和鼠标移出效果的最佳方法是什么？

发布于 2024-11-27 15:59:37 字数 177 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

属性 2024-12-04 15:59:37

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

现在您可以调整 IMG 的不透明度，暴露其后面的背景图像，而无需交换任何内容。

使用 .opacity()

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

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

Put an image in a DIV and set the background of the DIV to the first image. Put an image tag in the DIV and point the SRC to the second image.

Now you can fiddle with the opacity of the IMG, exposing the background image behind it without having to swap anything.

use .opacity()

Make sure you put dimensions on the wrapper DIV or else it will vanish once the opacity of the image inside gets to zero.

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

回复收藏 0 原文

小巷里的女流氓 2024-12-04 15:59:37

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 将清除之前的动画并使其完成，这样，如果用户将鼠标快速悬停在元素上多次，它不会让动画在很长的队列中累积。

CSS3 is adding a bunch of transition properties to handle things like this, but for the moment if you're set on using jQuery you could make use of the .animate function combined with mouseenter and mouseleave.

Example:

$('img')
    .mouseenter(function() {
        $(this).stop(true,true).animate({ opacity: 0.5 }, 2000);
    });
    .mouseleave(function() {
        $(this).stop(true,true).animate({ opacity: 1 }, 2000);
    });

The .stop will clear the previous animation and make it finish so that if the user were to hover quickly over the element several times, it won't let the animations build up in a long queue.

回复收藏 0 原文

樱娆 2024-12-04 15:59:37

你可以试试这个

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

You can try this

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

回复收藏 0 原文

~没有更多了~