幫助懸停功能

任何幫助，將不勝感激...幫助懸停功能

我想創建一個彩色照片褪色通過從黑色和白色的影響。淡入淡出的作品，但它的褪色的黑色和白色的第一個，我不想要... ID喜歡它出現好像顏色正在通過。然後，一旦它離開它，它應該恢復到我目前不做的原始圖形。

下面的代碼完美的作品除了我上面提到的部分...

//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"); 
       }); 
      }); 
     } 
    }); 
}

來源

2009-11-04 Andy

謝謝格雷格，我注意到這已被編輯，但我無法看到變化？我粘貼的代碼，它並沒有改變！ – Andy 2009-11-04 14:59:47

可以提供兩個函數懸停（超過，出）事件。您目前只使用「over」功能。「out」功能被忽略（因爲你沒有提供），這就是爲什麼你看不到淡出效果。

您尋找的效果不起作用，因爲fadeOut效果在調用回調函數之前等待動畫完成。你想要兩個效果同時執行。

這種效果會更難完成。

首先你必須有2個圖像元素。一個包含顏色，一個包含黑白圖像。

$(this).fadeOut("slow"); 
$("otherImageElement").fadeIn("slow");

現在。我不打算研究一切，但是。這樣做會在動畫過程中立即在「this」圖像元素的右側顯示「otherImageElement」。顯然不是你想要的。我相信「otherImageElement」將不得不放在與原始圖像「相對」的位置，以使其中一個出現在另一個之上。

來源

2009-11-04 15:18:21

我剛剛在谷歌搜索「jquery交叉淡入淡出過渡」。這有大量的點擊，我敢肯定，你可以找到一些東西來幫助你。 – 2009-11-04 15:22:17

好的感謝布拉德，虐待嘗試和這工作到我的代碼，看看我怎麼... – Andy 2009-11-04 15:58:51

我試圖將鼠標懸停功能，但不斷得到一個空白頁，這顯然是由語法錯誤造成的。如何將以上所述的內容合併到我的原始代碼中？ – Andy 2009-11-04 16:12:23

再次感謝布拉德您的輸入...我喜歡你走近它的方式......我希望這是去上班:)

它產生一個空白的屏幕再次對不起......這是我的代碼...

  function switch(element) { 
      var originalPath = $(element).attr("src"); 
      var switchToPath = $(element).attr("rel"); 
      $(element).attr({ src: originalPath }); 
      $(element).fadeOut("slow", function() { 
        $(element).attr({ src: switchToPath }).fadeIn("slow"); 
      } 
     } 

     //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(switch(this), switch(this)); 
       } 
      }); 
     }

來源

2009-11-04 20:34:32 Andy

幫助懸停功能

回答

相關問題