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");
        }
    })
});

请单击字段类型并选择复选框。我很好的显示隐藏选项的过渡正在工作。但我想隐藏元素，这样and之间#check-boxes就不会有那么多空白。我尝试了元素，然后在 Javascript 中尝试了，我得到了非常错误的结果。Field typeDescriptiondisplay:none#check-boxesfadeIn

有可能做到吗？

4

6 回答 6

0

我明白你的意思，我得到的结果不一致。如您所料，显示不是可动画的，这可能是在将过渡与它结合时的问题。我尝试转换高度，但这让它看起来很奇怪。

最后，我使用 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;
}
于 2013-09-24T16:48:46.367 回答
0

像这样的东西？

$(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/

于 2013-09-24T16:28:31.380 回答
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()

显示文档
隐藏文档

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

于 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 回答