讓淡入淡出淡入淡出更改圖像的效果src

我正在使用響應式網頁設計，我想在頁面中滑動一些圖像。我嘗試了一些插件，但插件的問題是它使用寬度和高度屬性，有些還指定絕對位置。所以我想用js自己改變圖像的src，它工作的很好，但我可以給它一些過渡效果嗎？讓淡入淡出淡入淡出更改圖像的效果src

我所做的是：

var i =0; 
var total =2; 
window.setInterval(function(){ 
    show_hide(); 
}, 1000); 

function show_hide() 
{ 
     var img=$('.image-holder img, .image-holder2 img'); 
     //alert(img.length); 
     if(i%2==0) 
     { 

      img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png'; 
      img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png'; 

      i=0; 
     } 
     else 
     { 

      img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834'; 
      img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834'; 
     } 

     i++; 




}

我的HTML

<div class="image-holder" > 
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" /> 


</div> 
<div class="image-holder2" > 
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" /> 
</div>

來源

2012-10-25 Arun Killu

爲什麼計算器不允許展示的目的，我小提琴http：//jsfiddle.net/an7Fd/ –

回答標題，給人一種淡入/淡出而改變SRC很容易，只是讓元素淡出，改變src和讓它再次褪色英寸另外，我想指出的是，與jQuery，通過這樣的一類迭代，廢墟使用它自己的選擇「.each()」

$('.image-holder img, .image-holder2 img').each(function() { 
      $(this).fadeOut(200,function() { 
       $(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png'); 
       $(this).fadeIn(200); 
      }); 
     });

http://jsfiddle.net/tq9nV/1/

來源

2012-10-25 13:22:06 extramaster