0

我正在处理我的学生项目，我是新的 jquery，对于这个项目，我必须使用 jquery 来增强一些功能，并且我学到了很多东西来执行基本任务，但是我被一些非常混乱的事情困住了。

我的一个脚本实际上在鼠标悬停功能时更改了 div 容器的图像，功能目前很好，但让它感觉有点漂亮我想通过淡入淡出功能或通过动画添加过渡效果，但我无法工作两者兼而有之。我在互联网上搜索，但在这里我无法将这些示例与这里联系起来。

我只想知道在这段代码中我可以在哪里插入淡入淡出或动画功能，给它一个过渡效果：

$(document).ready(function () {
$(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).attr("alt", $(this).attr("src"));
    $(this).attr("src", dummyImg);
}, function () {
    var dummyImg = $(this).attr("src");
    $(this).attr("src", $(this).attr("alt"));
    $(this).attr("alt", dummyImg);
});
});

谢谢！

4

4 回答 4

3

您想访问fadeIn 和fadeOut 函数的回调函数，这将允许您对src 图像进行更改以及不进行更改。它看起来像这样->

$(document).ready(function () {
  $(".thumb").hover(function () {
    var dummyImg = $(this).attr("alt");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("alt", $(this).attr("src"));
      $(this).attr("src", dummyImg);
      $(this).fadeIn('slow');
    });
  }, function () {
    var dummyImg = $(this).attr("src");
    $(this).fadeOut('slow', function(){
      //this is now the callback.
      $(this).attr("src", $(this).attr("alt"));
      $(this).attr("alt", dummyImg);
      $(this).fadeIn('slow');   
    });
  });
});
于 2012-07-29T23:01:19.863 回答
1

马文，

你有没有想过使用 css webkit？这篇 SO 文章详细介绍了交叉淡入淡出的图像 - 以不同的速率。CSS Webkit 过渡 - 淡出比淡入慢

您还可以使用基本事件来淡入/淡出图像。这篇 JQuery/JSFiddle SO 文章使用了this参考对象：Jquery fadeOut on hover

JSFiddle.net 文档中的基本淡入/淡出结构如下：

$('#show').hover(function() {
    $(this).stop(true).fadeTo("slow", 0);
}, function() {
    $(this).stop(true).fadeTo("slow", 1);
});

~乔尔

于 2012-07-29T22:54:49.493 回答
1

就个人而言，我会将两个图像（css）分层，因此非悬停版本通常位于顶部。然后在悬停函数中，添加一个 $(this).fadeOut('fast') 以便显示底层图像。

于 2012-07-29T22:57:22.337 回答
1

http://jsfiddle.net/Xm2Be/13/有一个例子可以做到这一点。当然，您可以通过在括号内放置一些数字来设置淡入淡出效果的长度。例如 .fadeToggle(5000) 的时间为 5 秒。

于 2012-07-29T23:03:03.067 回答