在jquery中使用淡入淡出

Using fade in/fade out with jquery

本文关键字：淡入 淡出 jquery      更新时间：2024-04-12

我正在研究我的一个学生项目，我是新的jquery，对于这个项目，我必须使用jquery来增强一些功能，我已经学到了很多执行基本任务的知识，但我遇到了一些非常困惑的事情。

我的一个脚本实际上在鼠标悬停函数上更改了div容器的图像，该函数目前很好，但让它感觉有点漂亮。我想通过淡入淡出函数或animate为它添加过渡效果，但无法同时使用这两个函数。我在网上搜索过，但在这里我无法将这些例子联系起来。

我只想知道在这个代码中，我可以在哪里插入淡入淡出或动画函数，以使其具有过渡效果：

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

谢谢！

如果您想访问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');   
    });
  });
});

Maven，

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

您还可以使用基本事件来淡入/淡出图像。这篇JQuery/JSFidle SO文章使用了this参考对象：悬停上的JQuery fadeOut

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

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

~ JOL

Personaly，我会将两个图像（css）分层，这样非悬停版本通常位于顶部。然后在悬停函数中，添加$（this）.fadeOut（'fast'），以便显示基础图像。

http://jsfiddle.net/Xm2Be/13/有一个例子，你可以做到这一点。当然，您可以通过在括号内放置一些数字来设置渐变效果的长度。例如，音量切换（5000）的计时为5秒。

相关文章：