如何使jQuery幻燈片打開和關閉與CSS類

我怎樣才能我的CSS樣式背景和文本順利地滑入jQuery動作？現在再次單擊關閉時，背景顏色將消失，然後文本將向上滑動。我希望背景能夠保持並隨文本一起上滑。如何使jQuery幻燈片打開和關閉與CSS類

我也想弄清楚如何讓一個動作關閉後點擊另一個。我的代碼是here。

2012-12-23 user1676691

你能解釋一下我們要做什麼才能看到你所說的效果嗎？ – Barmar

這不是完全明顯，但在這行代碼：

$(this).siblings().slideToggle('slow').parent().toggleClass('expanded');

的slideToggle函數實際上是要以異步方式運行。也就是說，極有可能在動畫結束之前運行toggleClass。如果您閱讀了jQuery docs for slideToggle，您會發現它接受callback函數作爲可選參數。任何時候你想確保一段代碼在動畫完成後運行，然後使用回調。例如：

var _this = this; // because this will point to a different object inside the callback 
$(this).siblings().slideToggle('slow', function() { 
    $(_this).parent().toggleClass('expanded'); 
});

或類似的東西。目前並不明顯，你正在尋求什麼樣的最終結果。但希望這會幫助你的方式。

來源

2012-12-23 07:04:16 patrickmcgraw

謝謝你的迴應。我是否需要定義「var_this = this;」？我很抱歉沒有完全理解這裏... – user1676691

多一點解釋會很好。此代碼不能與我所使用的指針點擊功能一起使用。 – user1676691

有關背景問題：

嘗試添加框中鍵入CSS屬性您希望保留自己的背景顏色的容器;

// I.e., 
box-sizing: border-box 
// @see https://developer.mozilla.org/en-US/docs/CSS/box-sizing

如果不行嘗試從內浮動元素和清除其浮動：

<div style="float: left; position: relative; width: 320px; height: 240px; margin: 10px; background: #ff0000;"> 
    <p>Content</p> 
    <br style="clear: both;" /> 
</div>

的持股量將執行寬度和背景顏色不管別的。

至於你的行動關閉前下一個行動打開： 看看腳本在下面的鏈接。這是我寫了幾年前的腳本，但你想要做什麼它的基本框架思路：

http://abi.edu/js/resources-page.js

撥動信息項目隱藏所有信息項目，顯示了一個與傳遞的ID;即每個鏈接點擊隱藏所有顯示點擊。

而且從大約一年前另一清潔例如： http://abitribeca.com/index/about

在左欄點擊鏈接查看的內容區域的變化。

還記得這些都是簡單的例子，你也可以做更復雜的東西，如：

http://elycruz.com/portfolio

@note最後一個例子是有點亂，因爲我正在學習如何從一個PHP後端處理JSON （雖然很好的例子）。

來源

2012-12-23 07:12:14 elydelacruz

如何使jQuery幻燈片打開和關閉與CSS類

回答

相關問題