1

問題：幅は固定されているが高さが不明な（自動）ボックス（div）があります。

JQueryアニメーション関数を使用してそのボックスを開閉する必要があります。

問題は（コードでもコメントされています）Openイベントで、自動高さを設定する必要がありますが、これはできません。誰かが高さを自動に設定するのを手伝ってもらえますか？

JSFiddle：http ://jsfiddle.net/7m5Qa/ コードも以下に示されています：

HTML

<button id="open">open</button>
<button id="close">close</button>
<div id="textselector-body">
    a<br/>
    b<br/>
    c<br/>
</div>​

Javaスクリプト

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px' //here is problem. I need it 'auto'.
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:'0'
        },2000);
    });
});​
4

4 に答える 4

5

slideDownとslideUpを試しましたか？：

$(document).ready(function(){
    $("#open").click(function(){
        $("#textselector-body").slideDown(2000);
    });
    $("#close").click(function(){
        $("#textselector-body").slideUp(2000);
    });
});​

jsFiddle： http: //jsfiddle.net/7m5Qa/2/

于 2012-08-24T08:38:00.450 に答える
2

試しましたheight:'toggle'か？（JQuery.animate（））

ボタンをクリックするたびに変換が逆になりますが、ボタンが1つだけ必要な場合は、それが解決策です。

デモ。

于 2012-08-24T08:49:26.927 に答える
1 
$(document).ready(function(){
    var H = $("#textselector-body").height();
    $("#open").click(function(){
        $("#textselector-body").animate({
            height:'100px'
        },2000);
    });
    $("#close").click(function(){
        $("#textselector-body").animate({
            height:H
        },2000);
    });
});​

フィドル

編集：

質問が正しいかわかりませんか？切り替えようとしているだけの場合は、次のことができます。

$(function(){
    $("#open, #close").click(function(e){
        $("#textselector-body")[e.target.id=='open'?'slideDown':'slideUp'](2000);
    });
});​

フィドル

于 2012-08-24T08:36:30.167 に答える
1

代わりに、jQueryで.slideUpメソッドと.slideDownメソッドを使用できます。

$("#open").click(function(){
        $("#textselector-body").slideDown('slow')
});

    $("#close").click(function(){
        $("#textselector-body").slideUp('slow')
});

http://jsfiddle.net/Kyle_Sevenoaks/7m5Qa/3/

于 2012-08-24T08:38:09.510 に答える