6

私はこれを何回も問題なく実行しましたが、何らかの理由でここで問題になります。スライドダウンは正常に機能し始め（1/3）、突然ジャークしてアニメーションを終了します。上にスライドすると問題なく動作します。これは、slideDown（）、slideToggle、および.animate（）の場合です。アニメーション関数で不透明度を切り替えると、ジャークしませんが、テキストの色が一時的に変わります。

HTML：

<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
    <p>
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
    </p></div>

CSS：マージンがぎくしゃくする可能性があることを他に読んだのですが、これは役に立ちません

    h2{color:#76DEFC; margin:0px;}
    .yamikowebsToggler{margin:0px;}
    p{margin:0px; color;#000000;}

JQUERY：

$(document).ready(function(){
    $(".yamikowebsToggler").fadeOut(0);
    $("h2").click(function()
    {
        $(this).next(".yamikowebsToggler").stop(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});
4

4 に答える 4

4

私は解決策を見つけました。それは私のコードとは何の関係もありませんでしたが、jqueryのバグです。jqueryは、高さを取得しているときに要素が非表示になっているため、継承されている場合は高さを取得するのに問題があります。要素が非表示の場合、それらは次のcssプロパティで処理されます。

position: absolute;
visibility: hidden;

これを修正するには、切り替え可能なアニメーションが多数あるため、私の場合は実行できないアニメーションの高さを指定する必要があります。別の方法は、要素に高さを設定することです。私は個人的にそれについてjQueryにメモを追加し、それをすべて一列に並べて追加しました

style="height: <height in px>;"

切り替えられる要素に。

于 2011-03-21T03:46:30.343 に答える
1

100％から0％の幅までの分割をアニメーション化するときに、同様の問題が発生しました。

何が起こっていたのかというと、アニメーションの開始時に、何らかの理由で部門が110％のように広くなったということでした。

とにかく、解決策はmax-width: 100%;特定の部門にCSSスタイルを追加することでした。

この問題の修正を探してここに来たので、ここに投稿すると思いました。:)

于 2012-05-18T11:59:25.800 に答える
0

増やしてみました{duration: ...}か？また、組み込みのjQuery関数.slideToggle（）を使用することもできます。

于 2011-03-20T02:42:08.237 に答える
0

これが回答としてマークされていることは知っていますが、この問題に関する最新情報を提供したいと思います。

対応する発行チケットはここにあります：http： //bugs.jquery.com/ticket/4541

ただし、コア開発者によってクローズされており、パフォーマンスの欠陥がないパッチがない限り、修正されないようです。

それまでの間、jQueryを使用してこれを実行する場合は、slideUpまたはslideDownしようとしている要素の高さまたは幅を設定できます。「ピクセル」単位である必要はなく、パーセンテージでもかまいません。

于 2011-10-05T06:14:45.333 に答える