使用jquery淡入/淡出 [英] Using fade in/fade out with jquery

问题描述

我正在研究我的学生项目，我是新的jquery，因为项目我必须使用jquery来增强功能，并且我已经学到很多东西来执行基本任务，但是我被困在一些非常令人困惑的事情上。

I am working over on of my student projects and I am new jquery, for the project I have to use jquery to enhance few function and I have learned much to carry out basic tasks, but I am stuck over something very confusing.

我的脚本实际上在鼠标功能上改变了div容器的图像，功能目前很好但让它感觉有点漂亮我想为它添加转换效果要么通过淡出淡出功能，要么通过动画，但我无法解决这两个问题。我在互联网上搜索但是在这里我无法将这些例子联系到这里。

One my scripts actually changes the image of a div container at mouse over function, function is currently fine but make it feel a little beautiful I want to add transition affects to it either through fade in fade out functions or through animate but am unable to work it out with both. I searched over internet but here i am unable to relate those examples to mind here.

我只是想知道在哪里可以插入淡入淡出或动画功能代码，给它一个转换效果：

I just want to know where can I insert fade in fade out or animate function in this code, to give it a transitioning effect:

$(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图像，而不是。它看起来像这样 - >

You want to access the callback function of the fadeIn and fadeOut functions, this will allow you to make changes to the src image and what not. it would look something like this ->

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

这篇关于使用jquery淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！