3

divをコンテンツの100％にアニメーション化しようとしていますが、点滅するだけで、divをアニメーション化するのではなく、アニメーションの最後に背景が消えます。パーセンテージではなく高さの数値を入力すると機能するため、困惑しています。

$("#artbutton").click(function(event){
    event.preventDefault();
    var $self=$(this);
    $("#media").animate({height:0},"slow");
    $("#music").animate({height:0},"slow",function(){
        document.location = $self.attr('href');
        $("#art").animate({height:"100%"},"slow");
    });
});
4

3 に答える 3

1

パーセンテージで行けるかどうかわからない場合は、高さが固定されていない場合は、最初にJSを使用して高さの値を取得してみませんか。

$height = $('div').height();

次に、高さを数値でアニメーション化します。

$("#artbutton").click(function(event){
    event.preventDefault();
    var $self=$(this);
    $("#media").animate({height:0},"slow");
    $("#music").animate({height:0},"slow",function(){
        document.location = $self.attr('href');
        $("#art").animate({height: $height + 'px',},"slow");
    });
});
于 2012-07-16T12:58:57.860 に答える
1

通常、身長に関しては、パーセンテージを使用しないようにします。問題は次のとおりです。

divの高さは100％です...何の？ 回答：親要素の高さの100％。OK、素晴らしい！親要素の高さはどれくらいですか？中に含まれる要素の高さを確認しましょう。うーん、この子divの高さは100％に設定されています...何ですか？

そして、ループは続きます...

これには2つの修正があります。

  1. 親要素の高さが固定されていることを確認してください（パーセンテージではなく、上の親をチェックするためなど）。したがって、親タグの高さが固定されている場合にのみ、高さのパーセンテージを使用できます。
  2. パーセンテージを使用せず、divに固定の高さを指定してください。

または、逆に、divを新しいdivでラップすることもできます。親を固定の高さに設定すると、子（古いdiv）はパーセンテージベースの高さの値を使用できるようになります。

于 2012-07-16T14:17:03.637 に答える
0

定義された高さで外側のdivを設定するというアイデアは、私にとって可能な解決策ではありませんでした。私のphpコードはテンプレートであり、divのコンテンツは常に変化していました。ユーザーがクリックしたリンクに依存するデータベースのコンテンツがファイルされていました。そして、このdivはページの上部にあり、そのすぐ下に表示する必要のある他の情報があります。

それで、私は私にとって非常にうまくいくこの解決策を思いつきました。

まず、CSSから設定された高さを削除し、「display：none;」を追加しました。-これにより、divを完全に開いてロードできましたが、ユーザーには表示されません。

次に、JavaScript（この場合はjQuery）を使用して高さを取得しました。次に、jQueryを使用して、表示をブロックに設定し、高さを必要な「閉じた」設定に設定しました。最後に、.animationで取得した高さを使用して、divを「開いて」スライドさせました。

CSSコード：

#main_description {
position: relative;
display: none;
/*height: 8.92855em; -> this was the original 'closed' height*/ 
border-bottom: 1px solid #a9a5a6;
overflow: hidden;
}

JavaScript：

var state = true;
var descriptionHeight = $("#main_description").height();
// for testing -> alert("Description Height: " + descriptionHeight);

$("#main_description").css({"display" : "block", "height" : "8.92855em"});

$("#main_description_toggle").click(function()
{
    if (state)
    {
        $("#main_description").animate({
        height: descriptionHeight + "px"
        }, 1000);

        $("#main_description_toggle").html("<a>less &#9650;</a>");
    }
    else
    {
        $("#main_description").animate({
        height: "8.92855em"
        }, 1000);

        $("#main_description_toggle").html("<a>more &#9660;</a>");
    }
    state = !state;
});

（8.92855emの高さは奇妙に思えますが、これは行の高さの5倍であり、クライアントはdivが「閉じている」ときに5行のテキストを表示することを望んでいました）。

于 2015-09-16T15:00:50.097 に答える