如何使圖像淡入淡出並用jQuery 1.7擴展

我試過了各種代碼片段，但無法讓它們做我想做的事。如何使圖像淡入淡出並用jQuery 1.7擴展

我想要做的是有一個href，它將圖像從隱藏/淡出/收縮切換到展開/完全可見。

我看了淡入淡出/延遲和動畫，但無法瞭解語法。

作爲一個單獨的問題，我在一個標籤中這樣做。如果圖像或圖像之後的文本擴展超出爲選項卡定義的高度，我可以獲取標籤然後滾動嗎？

#StockTakeSummaryPic { 
width:1120px; 
height:1px;} 

function fncShowImage() { 
$('#StockTakeSummaryPic').animate({ 
    opacity: 1, 
    height: 'toggle' 
}, 1000, function() { 
    // Animation complete. 
}); 
} 


<a href="#" onclick="javascript:fncShowImage()">View</a>

已添加代碼。

謝謝。

來源

2012-02-20 Keith

發表了一些代碼，動畫並不難，所以也許我們可以幫你 – 2012-02-20 12:46:00

首先這是錯誤的是，你的高度設置爲1px，所以當你切換高度時，它在0和1之間切換，所以它不會顯示出來。

查看我的示例here我給出了三個選項toggle,fade和slide。你只需要改變函數調用來查看它們的工作方式。

來源

2012-02-20 13:48:09 Henesnarfel

謝謝。我使用了切換事件。 – Keith 2012-02-20 14:38:15

<script> 
$('.pic-toggle').click(function(event) { 
    event.preventDefault(); 
    $('#StockTakeSummaryPic').toggle("slow"); 
}); 
</script> 


<a class='pic-toggle' href="#">View</a>

試試看。

來源

2012-02-20 13:40:34 Hank

event.preventDefault（）是做什麼用的？ – Keith 2012-02-20 14:18:15

無法使點擊功能正常工作。我所做的只是將href上的類更改爲ID，然後更改jquery中的選擇器以處理id。 – Keith 2012-02-20 14:39:37

好聽。 event.preventDefault（）函數阻止瀏覽器嘗試訪問href網址。在你的情況下，它唯一的'＃'，所以它沒有太壞 – Hank 2012-02-21 01:23:29

如何使圖像淡入淡出並用jQuery 1.7擴展

回答

相關問題