將淡入淡出效果添加到圖像交換

我正在尋找解決方案，以便在交換圖像時爲幾張圖像添加漂亮的淡入淡出效果。我是jquery的新手，已經看到了許多解決方案，但僅用於單張圖片而不是多張圖片。嘗試使用z-index技術，但將所有圖片置於彼此之上。將淡入淡出效果添加到圖像交換

我正在使用這個jQuery代碼來交換圖像。

$(document).ready(function(){ 



// jQuery image change on hover 
$("ul#aside li a img") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "over.png"; 
     $(this).attr("src", src); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("over", ""); 
     $(this).attr("src", src); 

    }); 
});

任何幫助或提示，非常感謝。

來源

2011-09-30 NielsPilon

$("ul#aside li a img") 
    .mouseover(function() { 
     var src = $(this).attr("src").match(/[^\.]+/) + "over.png"; 
     var $this = $(this); 
     $this.fadeOut("fast", function() { 
      $this.attr("src", src).fadeIn("slow"); 
     }); 
    }) 
    .mouseout(function() { 
     var src = $(this).attr("src").replace("over", ""); 
     var $this = $(this); 
     $this.fadeOut("fast", function() { 
      $this.attr("src", src).fadeIn("slow"); 
     }); 

    }); 
});

來源

2011-09-30 14:38:41

我認爲這是淡入淡出和那 –

工作是它只有點粗糙過渡。它也看起來像是交換，刪除，並再次顯示。你可以在這裏看到它的生活http://nielspilonwebdesign.nl/dev/adri – NielsPilon

@NielsPilon ...修改我的答案，使用淡出的完整回調...試一試。它應該過渡得更好。 –

嘗試這樣的事情

$(this).hide(); 
    $(this).attr("src", src); 
    $(this).fadeIn();

.fadeOut()會褪色的圖像進行

來源

2011-09-30 14:39:32

將淡入淡出效果添加到圖像交換

回答

相關問題