トグルでスムーズにする方法（ 'slow'）

以下のコードがありますが、各トグルアクションの終了時に少し跳ね上がります。トグルでスムーズにする方法（ 'slow'）

段落を切り替えるとスムーズになりますか？

私は段落を取得しようとしていますが、私はそれを行う方法がわかりません。

誰でも教えてください。

ありがとうございます。

<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の元の見積もりにスペースを占めるが、アニメーションが完了すると折りたたまれてしまうために発生します。

解決策は、.morepara divに明示的な高さ、枠線または上端/下端のパディングを付けることによって、折りたたみが起こらないようにすることです。効果。

出典

2009-06-13 20:48:41 grahamparks

+1重要な情報を記入していただきありがとうございます。 – converter42

あなたは> < DIVから> < Pにアクセスするために.children('p')を使用することができますが、私はまだ< div>要素に適用し、あなたが代わりに.toggleの.slideToggle('slow')方法を試してみることをお勧め。一般に、それはあなたが期待するようなものに適しています。

出典

2009-06-13 13:13:41 stanch

上記のコードに.children（ 'p'）を追加しました。 var $ parentpara = $（this）.parent（）。prev（）。children（ 'p'）; しかし、これは動作しません。 – shin

さて、私はあなたが段落にアクセスする方法を指摘しました。アニメーションをスムーズにする方法であるかどうかはわかりません。また、とにかくdivを.toggleする必要があります。 Personnaly私はもう一度試してみてください.slideToggle for this thing。ウェブをチェックする - 非表示の段落は、しばしばスライドするだけでなく、トグルします。 – stanch

ジッタの原因はわかりません。私の推測では、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

まだ答えがありますが、実際に働いている特定のWIDTHをトグルしているDIVを与えているかどうかはわかりません。チェックインでFF & IE 7-8

出典

2009-11-12 04:06:11 hollywood3224

トグルでスムーズにする方法（ 'slow'）

答えて

関連する問題