在jquery中使用淡入/淡出

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镜像进行更改。它看起来像这样的->

$(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？这篇文章详细介绍了交叉衰落图像--以不同的速率。CSS Webkit Transition - Fade out slowly than Fade in

你也可以利用一个基本的事件来淡入/淡出图像。本文使用了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)分层，这样非悬停版本通常在顶部。然后在hover函数中，添加一个$(.fadeOut).fadeOut(‘fast’)，以便显示底层图像。