0

スライドインし、その下のコンテンツを「エレガントに」スライドさせながらスライドさせる単純なメッセージを作成しようとしています。私が抱えている問題は、メッセージの下のコンテンツがエレガントにスライドせず、「ジャンプ」していることです。アニメーションが始まる前に、メッセージの高さいっぱいまで。メッセージが非表示になった場合も同様です。メッセージは上にスライドしますが、アニメーションが完了してコンテンツが元の位置に戻るまで、高さは同じままです。

超単純化された JSFiddle: http://jsfiddle.net/U94qD/2/

コード (JSFiddle がダウンしている場合):

HTML:

<div class="slide" style="display:none;">Sliding Something into place</div>
<div>This is always shown, but jumps down when the slide animation starts instead of sliding down with the element as it's displayed and it stays in place as the div above hides instead of sliding smoothly with it.</div>

JS:

setTimeout(function() {
    show();
}, 500);

function show() {
    $(".slide").show('slide', {
        direction: 'up'
    }, 1000, function() {
        hide();
    });
}

function hide() {
    setTimeout(function() {
        $(".slide").hide('slide', {
            direction: 'up'
        }, 1000);
    });
}

注:代わりに「slideDown」および「slideUp」メソッドを使用してみましたが、アニメーションは同じように機能しません。コンテンツを下にスライドさせる代わりに、div の高さを調整してコンテンツを表示します。これは、「スライド」ではなく「ブラインド」アニメーションと呼ばれるものです。

4

2 に答える 2

0

ボンネットの下で jQuery UI をいじる以外に私が見ることができる唯一の解決策は、追加のコンテナーを使用してアニメーションを「手動で」構築することです。ここで例を作成しました( http://jsfiddle.net/U94qD/6/ )。右側の 3 番目のセットは、最初の例で期待していた方法をアニメーション化します。

于 2012-04-04T16:35:11.187 に答える
0

この HTML を試してください:

<div><div class="slide">Sliding Something into place</div></div>
<div>This is always shown, but jumps down when the slide animation starts instead of sliding down with the element as it's displayed and it stays in place as the div above hides instead of sliding smoothly with it.</div>

そして、このjQuery：

setTimeout(
function() {
show();}, 
500);
var current_height = $(".slide").height();
$(".slide").parent().css("height",current_height);
 $(".slide").hide();
function show() {
$(".slide").show('slide', {
    direction: 'up'
}, 1000, function() {
    hide();
});
}
function hide() {
setTimeout(function() {
    $(".slide").hide('slide', {
        direction: 'up'
    }, 1000);
});
}
于 2014-01-17T09:20:27.807 に答える