如何使用切換（'慢'）使其更平滑

我有以下代碼可以工作，但在每次切換操作結束時會變得有點跳躍。如何使用切換（'慢'）使其更平滑

如果我切換段落會更順利嗎？

我正在嘗試獲取該段落，但我不知道該怎麼做。

任何人都可以幫助我嗎？

在此先感謝。

<head> 

<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
display:none; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 

<div id="section1"> 
<div class="toppara"><p>Content 1.</p> 

</div> 

<div class="morepara"> 
<p> 
Content 2. 
</p> 

</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 1 --> 

<!-- section 2 --> 
<div id="section2"> 
<div class="toppara"><p>Content 3.</p> 
</div> 


<div class="morepara"> 
<p> 
Content 4. 
</p> 


</div> 

<p class="togglebutn"> 
<a>Show/Hide</a> 
</p> 
</div><!-- section 2 --> 

<script language="javascript" type="text/javascript"> 
$(function() { 
    $('.togglebutn a').click(    
     function(){ 
     var $parentpara = $(this).parent().prev(); 

     $parentpara.toggle('slow'); 
    }); 

}); 


</script>

來源

2009-06-13 shin

對於下滑工作，JQuery必須猜測元素的最終高度。當它出錯時，你會在動畫結束時看到跳躍，並且元素被允許找到它的自然高度。

您的問題是由p標籤上的邊距引起的，它佔用了JQuery原始估計的空間，但在動畫完成時會摺疊。

解決方法是要麼刪除邊緣上p標籤，要儘量防止通過給.morepara發生坍塌DIV明確的高度，邊框或者一些頂部/底部填充，雖然這兩種選擇都有不良的副作用效果。

來源

2009-06-13 20:48:41 grahamparks

可以使用.children('p')爲了從< DIV>訪問< P>，但我建議你嘗試.slideToggle('slow')方法，而不是.toggle，仍然把它應用到< div>元素。一般來說，它適合你期望的事情。

來源

2009-06-13 13:13:41 stanch

我在上面的代碼中添加了.children（'p'）。 var $ parentpara = $（this）.parent（）。prev（）。children（'p'）; 但這不起作用。有什麼想法？ – shin 2009-06-13 14:11:55

嗯，我只是指出了一種訪問該段落的方法。我不確定這是否是平滑動畫的一種方式。此外，你必須反正.toggle div。 Personnaly我再一次建議你試試.slideToggle這個東西。檢查網頁 - 隱藏的段落經常滑動，而不僅僅是切換。 – stanch 2009-06-13 14:19:21

我不確定是什麼導致了抖動。我的猜測是，當div的顯示屬性從'none'更改爲'block'時，將該段落裝入div是一種效果。我已經應用了stanch的建議，並提出了一個看起來更好一點的工作示例。

<html> 
<head> 
<style type="text/css"> 
body {width: 660px; margin: 0 auto; } 
.toppara{ 
background-color: #FF9; 
} 
.morepara { 
background-color: #fff; 
} 

.togglebutn { 
color: #900; 
background-color: #FFF; 
} 

</style> 

</head> 

<body> 
    <div id="section1"> 
     <div class="toppara"> 
      <p>Content 1.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 2. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

    <div id="section2"> 
     <div class="toppara"> 
      <p>Content 3.</p> 
     </div> 
     <div class="morepara"> 
      <p> 
      Content 4. 
      </p> 
     </div> 
     <p class="togglebutn"> 
      <a>Show/Hide</a> 
     </p> 
    </div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$('document').ready(function(){ 
    $('.morepara p').hide(); 
    $('.togglebutn a').click(
     function(){ 
      var parentpara = $(this).parent().prev().children(); 
      parentpara.toggle('normal'); 
     } 
    ); 
}); 
</script> 
</body> 
</html>

來源

2009-06-13 15:40:35 converter42

不知道如果你有這個答案，但給予正在切換特定寬度的DIV實際上爲我工作。簽入FF & IE 7-8

來源

2009-11-12 04:06:11 hollywood3224

如何使用切換（'慢'）使其更平滑

回答

相關問題