Question

我正在研究我的学生项目，我是新的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);
});
});

感谢 - 你！

Answer 1

您想要访问fadeIn和fadeOut函数的回调函数，这将允许您更改src图像，而不是。它看起来像这样 - ＆gt;

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

Answer 2

的Maven，

您是否考虑过使用css webkit？这篇SO文章详细介绍了交叉淡化图像 - 以不同的速率。 CSS Webkit Transition - Fade out slowly than Fade in

您还可以使用基本事件淡入/淡出图像。这篇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);
});

〜JOL

Answer 3

就个人而言，我将两个图像（css）分层，因此非悬停版本通常位于顶部。然后在悬停功能中，添加$（this）.fadeOut（'fast'）以显示基础图像。

Answer 4

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

使用jquery淡入/淡出

4 个答案: