3

パーセンテージをアニメーション化しようとすると、アニメーション化されませんが、即座に高さ全体に拡大されます。100%まで拡大したいけどスムーズに

CSS:

#block-views{
overflow:hidden;
height:20px;
}

HTML:

<div id="block-views">
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
</div>
<a href="#" class="loadmore">Load more</a>

Jクエリコード:

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).animate({
                height: "20px",
            }, 1000 );
        },
        function() {
            $( "#block-views" ).animate({
                height: "100%",
            }, 1000 );
        }

    );
});

もっと読み込むをクリックすると、スムーズにではなく、すぐに 100% に拡大されますが、2 回目にクリックすると、サイズが 20 px にスムーズに縮小されます。Chrome のインスペクター ツールで展開プロセスを監視しようとしましたが、パーセンテージがスムーズに追加されていることがはっきりとわかりますが、数字は整数ではなく、Chrome はそれを認識していないようです。どうすればこれを解決できますか?

4

5 に答える 5

1

CSS パーセンテージ値は親ノードにあると思います。

したがって、これを可能にしたい場合は、div親ノードを追加し、親ノードから高さを設定して、jsFiddleで例を挙げます

于 2012-08-03T08:56:29.620 に答える
0

私の頭に浮かぶ方法は2つあります。

最初の方法はあなたの方法です、私はここでコンマの,間違いを見つけます：position:aboslute;そしてcssプロパティを使用する必要があります。最後に、主な応答関数の順序を変更します。

これがjsFiddleの動作です。

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).stop().animate({
                height: "20px"//if you wont use another animate property; dont use comma here
            }, 1000 );
        },
        function() {
            $( "#block-views" ).stop().animate({
                height: "100%"
            }, 1000 );
        }

    );
});​

構造は次のようになります=.animate（properties [、duration] [、easing] [、complete]）

複数のアニメーション関数は次のようになります。.animate({'height':'20px','width':'20px'},1000);

-------------------------------------------------- ----------

2番目の方法は私の方法です。クリックするたびに+20pxの高さを追加できます。

これがjsFiddleです

$(function() {
    $( ".loadmore" ).click(function() {
        $("#block-views").animate({'height':'+=20px'},1000);
    });
});​
于 2012-08-03T08:51:23.673 に答える
0

JQueryフォーラムからのこの投稿があなたの要件に適していることをお勧めします。

http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div

于 2012-08-03T08:47:02.670 に答える
0

私はそれが合法ではないとかなり確信しています。pxとpercentを混在させることはできません-それらの間で変換する方法はありません。

于 2012-08-03T08:47:34.400 に答える