1

'myContent' div の下のラベル/フォームを非表示/表示するときに、よりスムーズに移行する方法はありますか?

現在、myContent div が切り替えられると、その下にある他の要素が所定の位置に「ジャンプ」します。それらを正しい位置にスライドさせる方法を見つけられれば幸いです。どう思いますか？

JavaScript

関数toggleDiv(divId) {
    jQuery("#" + divId).toggle("スライド", {
        方向：「上」
    });
}

関数 ShowThing(divID) {
    jQuery("#" + divID).show("スライド", {
        方向：「上」
    }、500);
}

関数 HideThing(divID) {
    jQuery("#" + divID).hide("スライド", {
        方向：「上」
    }、500);
}

HTML

<a href="javascript:toggleDiv('myContent');" style="background-color: #ccc; padding: 5px 10px;">Toggle Button</a>

<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
    </div>
</div>
<div>
    <label for="cool-field">Name</label>
    <input type="text" name="cool-field" id="cool-field" />
</div>
4

2 に答える 2

1

jsFiddleはこちら

すべてのコードが jQuery に基づくように JavaScript を最適化しました。

HTML コード

<a href="#" style="background-color: #ccc; padding: 5px 10px;" class="togglebtn">Toggle Button</a>

<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
    <div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
    </div>
</div>
<div>
    <label for="cool-field">Name</label>
    <input type="text" name="cool-field" id="cool-field" />
</div>

jQuery コード:

$(function(){
    $('a.togglebtn').click(function(){
        $('#myContent').stop().slideToggle(500);
        return false;
    });
    $('#showthing').click(function(){
        $('#myContent').slideDown(500);
    });
    $('#hidething').click(function(){
        $('#myContent').stop().slideUp(500);
    });    
});
于 2013-04-29T04:50:26.883 に答える
0

あなたのJsfiddleは空白です。

代わりにshow()使用できます使用できますまたslideDown('slow'); 、方向を設定することもできます。hideslideUp('slow');

それ以外の場合は、JQuery Animateを使用できます

于 2013-04-29T04:50:05.143 に答える