點擊時使用jquery改變圖像的CSS屬性

所以我是這個整個JavaScript的初學者，這可能是一個真正的初學者問題。我一直在尋找答案，甚至嘗試修改一些基本手風琴的源代碼，但它永遠不會起作用。點擊時使用jquery改變圖像的CSS屬性

基本上我想寫一個函數，當你點擊一個縮略圖時，圖像展開。我已經弄清楚了這部分內容，但是我無法弄清楚如何在點擊另一張圖片時，第一張圖片會回到縮略圖，而新點擊的圖片會展開。我希望有一個動畫質量，但我只會對基本功能感到滿意，也許我可以自己設計動畫。我的圖片庫是在一個無序的列表中，每個圖片都設置爲一個列表項目，我試圖用jquery來做到這一點。

在此先感謝！

這裏就是我已經做有較大的圖像，當你點擊：

$('ul#live li img').click(function() { 
    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 
});

我的CSS：

UL＃活利IMG { 寬度：120像素; height：72px; }

就是這樣。現在我想要的只是點擊另一張圖片，點擊第一張圖片就可以回到原來的120px寬度。而已。我並沒有試圖從流程中或任何類型的燈箱中刪除它。我這樣做的方式可能不是最好的方式，我只是在學習和嘗試。希望這可以解決問題。

來源

2011-06-15 Jay

它可以做得相當直接。我已經在具有類似過去所做的就是給擴展元素的新類$(this).addClass('active_element');

然後，您可以添加動畫，使被點擊的下一個項目時，任何與.active_element首先受到影響 - 運行你的動畫，刪除該類，然後運行新選定元素的效果。

$('ul#live li img').click(function() { 
    $('.active_element').animate({ 

    //close animation goes here 

    }); 
    $('.active_element').removeClass('active_element'); 

    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 

    $(this).addClass('active_element'); 

});

這可以寫得有點整潔，但這是逐步闡明的基本原則。

它很骯髒，但會完成這項工作。

來源

2011-06-15 04:23:56 TH1981

謝謝!!!我知道這會是一件非常簡單的事情，我只是沒有得到它。這有助於很多！ – Jay 2011-06-15 04:33:02

removeClass需要一個類名，而不是一個CSS選擇器。我試圖修復它，但我的編輯需要6個或更多字符，唯一需要更改的是刪除「。」。在removeClass參數 – dbellizzi 2011-06-15 04:40:22

謝謝dbellizzi - 我已經更新了。 :) – TH1981 2011-06-15 18:12:33

這是一個非常廣泛的問題。你最終可能會寫一大堆代碼來做一些你認爲很簡單的事情。

對於初學者，我建議你使用jQuery插件。然後你只需要做一些最小化的設置和配置，你可以隨時挑選它來學習它是如何工作的。

我喜歡一個叫prettyPhoto它做的東西就像你所描述的加上更多。如果它不合適，有許多不同的jQuery插件除了處理縮略圖，畫廊，幻燈片，燈箱以及所有可能的組合外，什麼也不做。

來源

2011-06-15 03:24:22 Sparky

點擊時使用jquery改變圖像的CSS屬性

回答

相關問題