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!
});

Answer 2

我真的不知道jQuery，但是下面的代码，如果我一直在使用，听起来像你可能会追求的。我用精灵图像来阻止某些浏览器中出现的烦人的闪烁。

$(function() {
    $(".fadebtn")
    .find("span")
    .hide()
    .end()
    .hover(function() {
            $(this).stop(true, true).find("span").fadeIn(600);
    }, function() {
            $(this).stop(true, true).find("span").fadeOut(200);
    });
});

FadeIn FadeOut与Jquery扭曲

2 个答案: