2009-11-05 173 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); 
    }); 
});