Question

这是我的问题：

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

请单击字段类型并选择复选框。我显示隐藏选项的过渡很有效。但我想隐藏#check-boxes元素，以便在Field type和Description之间不会有太多空格。我在display:none元素上尝试了#check-boxes，然后在Javascript fadeIn中尝试了，我得到了非常糟糕的结果。

有可能吗？

Answer 1

这样的东西？

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

http://jsfiddle.net/GDj7v/3/

Answer 2

添加此样式：

#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  

}

Answer 3

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()

Show docs
Hide docs

此外，对于自定义动画，您可能需要查看jQuery的animate函数。请查看docs以获取详细帮助。

Answer 4

您可以通过将margin-bottom节点的.form-group属性设置为0来轻松更改此内容：

.form-group {
    margin-bottom: 0;
}

Answer 5

如果您想使用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' });
        }
})

演示Fiddle

Answer 6

我明白你的意思，我得到了不一致的结果。正如您所期望的那样，display isn't animatable可能是将转换与其组合时的问题。我尝试过渡高度，但这让它看起来很奇怪。

最后，我使用setTimeout分离出更改显示属性并进行转换：

http://jsfiddle.net/BYossarian/GDj7v/28/

HTML更改：

<div id="check-boxes" class="hidden">

CSS补充道：

.hidden {
    display: none;
}

JS：

$(document).ready(function () {

    $("#field-type").change(function () {

        var $val = $(this).val(),
            checkboxes = $("#check-boxes");

        if ($val === "checkbox") {

            checkboxes.removeClass('hidden');
            setTimeout(function () {
                checkboxes.addClass('shown');
            }, 10);

        } else {

            checkboxes.removeClass('shown');
            setTimeout(function () {
                checkboxes.addClass('hidden');
            }, 1210);

        }

    });

});

编辑/替代解决方案：此外，将transition属性规则移动到#check-boxes.shown的规则中意味着转换只发生在一个方向上，从而解决问题我身高看起来很糟糕：

http://jsfiddle.net/BYossarian/GDj7v/30/

CSS：

#check-boxes {
    -webkit-transform: translateX(250px) rotateX(135deg);
    transform: translateX(250px) rotateX(135deg);
    opacity: 0;
    height: 0;
}
#check-boxes.shown {
    transition: all 1.2s ease-in-out;
    -webkit-transform: translateX(0px) rotateX(0deg);
    transform: translateX(0px) rotateX(0deg);
    opacity: 1;
    height: auto;
}

如何在转换过程中淡化元素？

6 个答案: