1

適切なものが選択され、アクティブなものが選択されslideDown()たときにしたい。divradioslideUp

ただ、今のままでは、ある場合には押し下げられ、ある場合には押し上げられています。

（プライベート→ショップ＝アップ、ショップ→プライベート＝ダウン）

常に押し下げたい。私は何を間違っていますか？

JSFiddle の現在の状態は次のとおりです: http://jsfiddle.net/mfmU7/

生の Javascript コード:

$(document).ready(function() {

    $("#private").click(function() {

        $('#registration-brand, #registration-shop').slideUp();
        $('#registration-private').slideDown();         

    });

    $("#shop").click(function() {

        $('#registration-brand, #registration-private').slideUp();
        $('#registration-shop').slideDown();

    });

    $("#brand").click(function() {

        $('#registration-shop, #registration-private').slideUp();
        $('#registration-brand').slideDown();

    });

});
4

3 に答える 3

2

DOM (または z-index) 内の位置がすべてです。

$(document).ready(function() {
    $('.btn').on('click', function() {
        var that = $('#registration-'+this.id);
        $('.registration-type:visible').not(that).slideUp().before(that.slideDown());
    });
});

フィドル

于 2013-08-01T21:44:34.437 に答える
0

私は同じ問題を抱えていたので、次を追加して解決しました：

position:absolute; 
bottom:85%;

CSSに追加すると、ここで問題が解決します

しかし、それらのdivを再度配置する必要があります

ここ: http://jsfiddle.net/isair/mfmU7/4/

于 2013-08-01T21:44:53.380 に答える
0

元のコードでは、すべてのアニメーションが一度に発生し、div が上下に垂直に配置されているため、問題 (視覚的に上にスライドするものと視覚的に下にスライドするもの) が発生します。上の 1 つは滑り落ちているように見えますが、他の 2 つは滑り落ちているときに下から飛び出しているように見えます。

私はこのようにするのが好きなので、他のアクションが終了するまで1つのアクションが開始されません:

$("#private").click(function() {

    $('#registration-brand, #registration-shop').slideUp(function() {
        $('#registration-private').slideDown();
    });

});

ここでフィドル

それを行う際の問題（私が通常行うように）は、関数が2回呼び出されることです.1回目は、すでに非表示になっているdivが非表示を終了したときです。表示されている div が既に完全に表示されている (またはほぼ表示されている) ため、2 番目のものは何もしません。

だから...別の解決策が必要です。

これは、スライドダウンを開始する前に、両方のスライドアップアクションが完了するまで (1 つの div が既に非表示になっている場合でも) 待機するため、まったく異なる外観になっています。「promise()」は、すべての「slideUp()」呼び出しがアニメーションを完了すると終了する何かを作成し、「always()」はそれが完了すると関数を呼び出します。

$("#private").click(function() {

    $('#registration-brand, #registration-shop').slideUp().promise().always(function() {
        $('#registration-private').slideDown();
    });

});

代替フィドル

于 2013-08-01T21:41:13.593 に答える