2014-04-04 69 views
8
<div class="searchDiv"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

我想打電話給$("div.searchDiv").slideToggle("slow");上分度,searchDiv類,它最初是隱藏的使用display:none。這些4 div中的div元素還有row。這些元素放置在主div div searchDiv中的方式是否重要?因爲我發現切換效果對於放置在主div內的元素不平滑。Jquery的效果的slideToggle不流暢

+1

你能發佈一個完整的代碼示例?並且儘可能包含jsFiddle.net示例。 – j08691

回答

7

如果事情外表光滑與否的想法是一個意見,並根據誰在看它的不同。如果你使用的速度很慢,那麼給它一個200毫秒的值。

SlideToggle。 https://api.jquery.com/slideToggle/

延時時間是以毫秒爲單位的較高的值表示較慢的動畫,而不是較快的動畫。可以提供字符串'fast'和'slow'來分別指示200和600毫秒的持續時間。

默認寬鬆的擺動和對我來說,它看起來粗糙。我會建議嘗試線性緩解。

如果擺動或直線是不是你不夠順暢,您可以使用,包括jQuery UI的,並使用其他選項之一。 您可以根據需要找到您認爲順暢的緩動。
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function() { 
    // actions to do when animation finish 
}); 
+0

放置在class =「row」分區內的子元素具有margin-left屬性,並且被絕對定位。我將他們的位置改爲相對,現在切換效果平穩。儘管智利元素的css不應該影響切換行爲。 – user2585299

+0

這不是被接受的答案嗎?沒有標記。 – donlaur

3

您需要將寬度添加到您的行。直到它顯示

jQuery的不知道你的隱藏div的尺寸。所以當它被點擊時,它實際上會將它拉出來以便在快速替換它之前進行測量。這往往有導致一些跳躍的副作用。設置元素的寬度可以防止jQuery將其拉離位置。

2

我知道這是舊的,但在情況下,它可以幫助別人,我發現了一個問題,當我的切換元件上設置的最小高度屬性設置爲解決這對我來說是固定的高度。

2

我有類似的問題。有兩件事爲我解決了。

  1. 我需要刪除我元素上的現有轉換CSS。
  2. 我有一個元素我的「點擊欄」內(H2)在需要邊距設置爲0(這是使其他元素動畫到錯誤的邊界 - 導致在最後一個奇怪的SNAP)