0

これが私の問題です：

http://jsfiddle.net/GDj7v/

$(document).ready(function () {
    $("#field-type").change(function () {
        $val = $(this).val();
        if ($val == "checkbox") {
            $("#check-boxes").addClass("shown");
        } else {
            $("#check-boxes").removeClass("shown");
        }
    })
});

フィールドタイプをクリックして、チェックボックスを選択してください。非表示のオプションを表示するための私の素敵な移行が機能しています。しかし、要素を非表示にして、 と の間の空白があまりないようにしたいと思い#check-boxesます。要素を試してからJavascriptを試したところ、非常にグリッチな結果が得られました。Field typeDescriptiondisplay:none#check-boxesfadeIn

それは可能ですか？

4

6 に答える 6

0

次のスタイルを追加します。

#check-boxes {

  transition: all 1.2s ease-in-out;
  transform: translateX(250px) rotateX(135deg);
  opacity: 0;
display: none;
}

#check-boxes.shown {

  transform: translateX(0px) rotateX(0deg);
  opacity: 1;
    display:block  

}
于 2013-09-24T16:29:36.667 に答える
0

jQuery にはフェードイン/フェードアウトのメソッドが組み込まれています。例えば：

//replace $("#check-boxes").addClass("shown"); with
$("#check-boxes").show(400); //fade in 400 ms, essentially the same as jQuery's fadeIn()

//$("#check-boxes").removeClass("shown"); with
$("#check-boxes").hide(400); //fade out 400 ms, essentially the same as jQuery's fadeOut()

ドキュメントを表示する ドキュメントを
非表示にする

animateまた、カスタム アニメーションについては、jQuery の機能を調べることができます。詳細なヘルプについては、ドキュメントを参照してください。

于 2013-09-24T16:30:15.020 に答える
0

これは、ノードのmargin-bottomプロパティを次のように設定することで簡単に変更できます。.form-group0

.form-group {
    margin-bottom: 0;
}
于 2013-09-24T16:30:22.973 に答える
0

slideDown()不透明度を使用したい場合slideUp()は、この方法を使用して行うことができますanimate()

if ($val == "checkbox") {
 $("#check-boxes").css('opacity', 0).slideDown('slow').animate({ opacity: 1 },{duration: 'slow' });
        } else {
$("#check-boxes").css('opacity', 1).slideUp('slow').animate({ opacity: 0 },{duration: 'slow' });
        }
})

デモフィドル

于 2013-09-24T16:38:04.040 に答える