jquery淡入淡出效果

我需要一些jQuery的幫助。我有一個簡單的圖像庫，我想添加一些jquery效果（特別是淡入/淡出#actimg中的圖像）。請記住，我不是很熟悉jQuery。jquery淡入淡出效果

<script type="text/javascript"> 
function showPic (whichpic) { 
    if (document.getElementById) { 
    document.getElementById('actimg').src = whichpic.href; 
    return false; 
} else { 
    return true; 
} 
} 
</script>

和身體

<ul> 
<li><a onclick="return showPic(this)" href="images/girl_01.jpg"><img height="50px" width="50px" src="images/girl_01.jpg" /></a></li> 
<li><a onclick="return showPic(this)" href="images/girl_02.jpg"><img height="50px" width="50px" src="images/girl_02.jpg" /></a></li> 
<li><a onclick="return showPic(this)" href="images/girl_03.jpg"><img height="50px" width="50px" src="images/girl_03.jpg" /></a></li> 
</ul> 

<img id="actimg" src="images/girl_04.jpg" alt="" />

來源

2011-07-29 Madr

什麼是你想怎麼辦？ –

那裏沒有裸體女孩:)只是與時尚和東西的圖像庫。 – Madr

function showPic (whichpic) { 
    if (document.getElementById) { 
    $('#actimg').fadeOut('slow'); 
    document.getElementById('actimg').src = whichpic.href; 
    $('#actimg').fadeIn('slow'); 
    return false; 
} else { 
    return true; 
} 
}

我已經加入周圍的線兩條線，你改變#actimg img標籤的來源。在一個之前衰#actimg出和一個剛過變淡它放回

---- ----編輯

變化：

$('#actimg').fadeOut('slow'); 
    document.getElementById('actimg').src = whichpic.href; 
    $('#actimg').fadeIn('slow');

到：

$('#actimg').fadeOut(250); 
    setTimeout(function() { 
     document.getElementById('actimg').src = whichpic.href; 
     $('#actimg').fadeIn(250); 
    }, 250);

這將fadeOut #actimg元素，然後它將更改該元素的來源和淡入元素。請注意，fadeOut持續時間應該等於或小於超時的持續時間，以便在圖像源更改之前完成淡入淡出。

來源

2011-07-29 20:44:42 Jasper

這看起來像是Id想要達到的效果，但現在當我點擊某個圖像時，我可以在它閃爍/淡入之前看到此圖像。 ps。（我正在使用最新的jQuery 1.6.2） – Madr

啊是的我以前也有過這個問題，我的方式是增加一個超時改變圖像的來源，看到我的編輯 – Jasper

是的，謝謝你非常非常漂亮，現在完美。 – Madr

在jQuery中通過id選擇一個元素，你使用「＃」+ id選擇器。

function showPic (whichpic) { 
    $('#actimg').attr("src", whichpic.href).hide().fadeIn(); 
}

來源

2011-07-29 20:45:44 ShankarSangoli

ShankarSangoli的回答看起來不錯。但是，如果你想顯示的圖像消失了新一消失之前，這是一個真棒效果，這樣做：

function showPic(whichPic) { 
    $('#actimg').fadeOut('fast', function() { 
    $('#actimg').attr('src', $(whichPic).attr('href')); 
    $('#actimg').fadeIn('fast'); 
    }); 
}

這需要在淡出回調的優勢。回調在動畫完成後調用。

來源

2011-07-29 20:48:41 tybro0103

嘗試類似：

$("li a").click(function(){ 
     $("#actimg").fadeOut(); 
     var imghref = $(this).attr("href"); 
     $("#actimg").attr("src",imghref); 
     $("#actimg").fadeIn();

} 和擺脫你的showpic功能...

來源

2011-07-29 20:49:30 Evan

jquery淡入淡出效果

回答

相關問題