トグルでそれをスムーズにする方法（「遅いです」）

StackOverflow https://stackoverflow.com/questions/990622

  •  13-09-2019
  •  | 
  •  

質問

私は動作しますが、それは各トグルアクションの最後で少しびくびくとなり、次のコードを持っています。

私は、段落を切り替える場合、それはよりスムーズになりますか？

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

誰も私を助けてくださいことはできますか？

事前に感謝します。

<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>

役に立ちましたか？

解決

jQueryの要素の最終的な高さを推測しなければならない動作するようにダウンスライドさせます。それは、この間違ったを取得するとアニメーションが終了し、要素がその天然の高さを見つけることが許可されているときは、ジャンプを参照してください。

あなたの問題は、jQueryの当初の見積りでスペースを取りpタグのマージンによって引き起こされますが、アニメーションが完了したときに崩壊しています。

両方のオプションは、望ましくない副作用を持っているのに

ソリューションは.moreparaを与えることによって起こってから崩壊を防ぐためにしようとする、pタグのマージンを削除するかで、明示的な高さ、国境やいくつかのトップ/ボトムのパディングをDIVます。

他のヒント

あなたは

の

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

私は、ジッタを引き起こしているかわからないんだけど。私の推測では、それはdiv要素の表示属性を「ブロック」に「なし」から変更されたときのdivに段落をフィッティングによる影響だあります。私が止めるの提案を適用し、少し良く働くようで作業例を作ってみた。

<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>

あなたはまだこの答えを持っているかどうかわからしかし、実際に私のために働いた特定の幅を切り替えされているDIV年代を与えていません。 FF＆IE 7-8で確認します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top