2

私はjquery1.3.2を使用しており、これは次のコードです。

    <script type="text/javascript">
    //<![CDATA[
    jQuery(function(){
        jQuery('.news_bullet a.show_preview').click(function() {
            jQuery(this).siblings('div').slideToggle('slow');
            return false;
        }).toggle(
        function() {
            jQuery(this).css({ 'background-position' : '0 -18px' });
        },
        function() {
            jQuery(this).css({ 'background-position' : '0 0' });
        });
    });
    //]]>
</script>

ここに表示されている場合、小さな緑+がたくさんあります。これをクリックすると、テキストが表示され、そのリンクの背景位置が変更されるため、画像の他の部分である赤-が表示されます。

ですから、私が抱えている問題は、テキストの量に依存するため、これらの非表示要素の高さがわからないことです。したがって、+をクリックして表示すると、アニメーションが「ジャンプ」します。

私が見つけた回避策の1つは、固定の高さとオーバーフローを配置することです。これらの非表示の要素に非表示にします。左上のブロック（上部に「Vestiiz sveta crtanogfilma」があるブロック）でどれだけスムーズなアニメーションが実行されているかを確認できます。他のすべてのブロックの高さは固定されておらず、アニメーションには「ジャンプ」があります。左上のブロックの固定高さは30pxですが、多くの場合、必要な高さが高い要素と低い要素があるため、これは適切な解決策ではありません... :)

では、高さが固定されていないときにこのアニメーションが「ジャンプ」しないようにするにはどうすればよいでしょうか。

4

2 に答える 2

3

CSS で幅を指定すると、この動作が停止します。

.news_bullet .hide { width: 272px; }

またはjQueryでも：

jQuery(".news_bullet .hide").width(272);

これらのオプションのいずれかが、びくびくしたスライドを停止します:)

于 2010-03-25T19:19:49.757 に答える
0

プログレッシブ エンハンスメントの実践者として、javascript を無効にしてそのテキストを非表示にしないように最初にお伝えします。

ページの読み込み時: 要素の高さを var に保存し、高さを設定して、現在のように追加のテキスト行を非表示にします。その変数を使用して、トグルでアニメーション化する高さを設定すると問題ありません。

コード例: http://www.pewpewlaser.com/articles/jquery-smooth-animation

于 2010-03-24T23:42:30.817 に答える