2009-11-05 208 views
3

我想创建一个悬停在动作上带来一个彩色图像,也一旦悬停被删除它淡出回到它的原始图像。FadeIn FadeOut with jquery with twist

我在这个论坛上有了帮助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"); 
     }); 
     }); 
    } 
    }); 
    } 
+0

有人可以帮我完成这个吗? – Andy 2009-11-05 18:59:49

+0

你甚至尝试了我在最后一个关于同样问题的问题上给你的不透明想法吗? – tvanfosson 2009-11-05 21:47:46

+0

也许你应该链接到你以前的问题,并提供一个工作的例子。喜欢在http://jsbin.com ...如果你没有得到直接的答案,它通常意味着你的问题需要澄清。 – 2009-11-08 14:41:24

回答

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

我真的不知道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); 
    }); 
});