給jquery添加效果toggleclass（）

我已經閱讀了關於這個問題的多個問題，但沒有一個實際上得到了一個適用於我的答案。給jquery添加效果toggleclass（）

我試圖添加fadein/fadeout或slideup/slidingdown到從jquery的toggleClass（）功能，但我無法弄清楚如何。有人有一個想法如何做到這一點？

添加：

transition: 1s;

爲我的類沒有工作，它只是顯示了瞬間。

類：

.hide{ 
    display: none; 
    transition: 1s; 
}

我怎樣才能解決這個問題？

謝謝！

來源

2014-10-07 Stefan

不能過渡'display'屬性。 – 2014-10-07 10:28:07

它刪除類隱藏，如果我切換它應該慢慢過渡，因此該div顯示緩慢 – Stefan 2014-10-07 10:28:52

無所謂...... display屬性不是動畫。然而，你可以用不透明和可見性來僞造它 - http://www.greywyvern.com/?post=337 – 2014-10-07 10:29:55

有一個使用jQuery的toggleClass（）/ slideToggle本身的選項！

HTML

<p class="targetid">test content</p> 
<button>Click</button>

腳本

$(document).ready(function() { 
$("button").on("click", function() { 
    $(".targetid").slideToggle("slow"); 
});

}）;

Fiddle Demo

來源

2014-10-07 10:33:24 Aru

請注意，添加緩動需要jQuery UI :) – 2014-10-07 10:35:28

或者更新您的腳本，如「$（」.targetid「）。 slideToggle（「slow」）;「 – Aru 2014-10-07 10:48:16

注意：您可以用延遲替換「slow」（例如：.slideToggle（1000）） – Aru 2014-10-07 10:52:45

代替display: none;使用height: 0px;然後在你toggleing類放height: __px;。

將__替換爲div的高度。這將添加幻燈片效果。

jsFiddle

來源

2014-10-07 10:33:45 Romeo

使用本

toggleClass(class, [duration])

來源

2014-10-07 10:36:08

請編輯您的答案，以添加關於您的代碼如何工作以及如何解決OP問題的說明。許多SO海報是新手，不會理解你發佈的代碼。 – 2014-10-07 11:11:46

此鏈接肯定會幫助你https://api.jqueryui.com/toggleClass/ – 2015-04-29 11:19:47

如果你想比較fadeOut/In你將不得不使用的動畫屬性狀混濁&知名度。

HTML

<button id="toggle">Show/Hide</button> 
<div class="see-me show"></div>

CSS

#toggle { 
    margin:25px; 
} 

.see-me { 
    width:150px; 
    height:150px; 
    background-color: #663399; 
    margin: 25px; 
    visibility:hidden; 
    opacity:0; 
    transition:visibility 0s linear 0.5s,opacity 0.5s linear; 
} 

.see-me.show { 
    visibility:visible; 
    opacity:1; 
    transition-delay:0s; 
}

$(document).ready(function() { 
    $('#toggle').click(function() { 
    $('.see-me').toggleClass('show'); 
    }); 
});

Codepen Demo

來源

2014-10-07 10:42:02

由於display屬性只有2個狀態，所以無法進行淡入淡出過渡。

嘗試

.hide{ 
    opacity:0; 
    transition: opacity 0.5s linear; 
} 

.show{ 
    opacity:1; 
}

來源

2014-10-07 10:43:18

給jquery添加效果toggleclass（）

回答

相關問題