切換，然後同時淡入圖像

當用戶點擊一個小的縮略圖圖像時，我想在同一頁面上放大一個div元素，然後顯示該圖像。到目前爲止，與下面的代碼工作：切換，然後同時淡入圖像

$(document).ready(function() { 
    $("img#thumb").click(function() {    //when image with ID thumb is clicked change src 
    var imgpath = $(this).attr("src"); 
    $("img#cover").attr("src", imgpath); 
}); 

});

但是我現在想的舊形象淡出，同時切換新視兩者在用戶點擊縮略圖。我跟蹤拇指點擊使jQuery保存src文件到一個變量，然後把它放在一個新的路徑使用.attr()

我該怎麼做？

來源

2012-11-19 johnnyzoo

不知道我逮住你需要什麼，但是這應該是好了，試試：

$(function(){ 
     $("img#thumb").bind('click',function() {    
     var img = $(this).clone(); //this clones the img, so you do not need to re-load that using src path 
     $(this).fadeOut(500); 
     $("img#cover").hide().html(img).fadeIn(500); //remove .hide() segment if you just are hiding by css rules 

     }); 

     });

來源

2012-11-19 18:11:04 sbaaaang

謝謝大家是非常有益的。一旦點擊了一個拇指，我希望已經存在的圖像立即在新圖像「後面」切換，而現在的「舊」圖像將淡出。 – johnnyzoo

np男子，很高興幫助你！ – sbaaaang

我想你的意思是淡出封面圖片。

如果你可以嘗試：

$("img#cover").fadeOut(); 
$("img#cover").attr("src", imgpath);

來源

2012-11-19 17:58:13 gonzalon

你應該是相當on事件，而不是的jQuery click事件。您甚至可以利用live，但現在已棄用。

來源

2012-11-19 18:02:55 defau1t

這裏是我的，你要完成什麼樣的解釋：DEMO。

HTML

<img class="thumb" src="/img/logo.png" width="100" /> 
<img class="thumb" src="http://www.wpclipart.com/sign_language/thumbs_up_large.png" width="100" /> 

<div class="cover"> 
    <img id="cover" width="400"/> 
    <img id="cover-old" width="400"/> 
</div>

的Javascript

$(function() { 
    $("img.thumb").on('click', function() { //when image with ID thumb is clicked change src 
     var imgpath = $(this).attr("src"); 
     $("#cover-old").attr('src', $("#cover").attr('src')); 
     $("#cover-old").show(); 
     $("#cover").hide(); 
     $("#cover").attr("src", imgpath); 
     $("#cover-old").fadeOut('slow'); 
     $("#cover").fadeIn('slow'); 
    }); 
});

CSS

.cover { 
    position: relative; 

} 
.cover img { 
    position: absolute; 
}

來源

2012-11-19 18:19:25

所有腳本都會重新加載映像，如果路徑相同，這就是您重新加載該映像的原因？ – sbaaaang

如果這是一個問題，您可以在進行替換之前驗證'src'屬性是否有所不同。 –

好吧，但他在自己的例子中使用相同的img路徑:) – sbaaaang

切換，然後同時淡入圖像

回答

相關問題