jquery - 使用 Jquery 进行淡入淡出

Question

我正在尝试创建一个悬停操作，该操作会带来彩色图像，并且一旦删除悬停，它就会淡出回原始图像。

在这个论坛上的 Funka 和 Brad 的帮助下，我在第一张图像中得到了它的淡出点，但是我需要得到它，这样一旦你将鼠标悬停，它就会淡出。

目前，它将图像淡出为空，然后淡入新图像。无论我是否将鼠标悬停，该图像都将保持在原位。

我喜欢它，所以看起来彩色图像正在逐渐从黑白图像中淡出，而不是在淡入之前淡出到 0...以及在悬停被移除后恢复。

如有任何帮助，我们将不胜感激。

//Loop through the images and print them to the page
   for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
   }

Answer 1

您的悬停只有鼠标悬停功能 - 在鼠标移开时执行某些操作...

$('img', $d).hover(function() {
    //This is the mouseover function
    var largePath = $(this).attr("rel");
    $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
    }
    );
},
function() {
    //This is the mouseout function!  Do something here!
});