Question

我已经多次使用这个并没有问题。通过width/height: 'toggle'动画DIV的高度和/或宽度，或用指定的宽度/高度替换'toggle'。

setTimeout( function(){
    $('.input-group .Advanced').animate({
       height: 'toggle'
    }, {
        duration: 500,
    });
} , 500);

height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle

代码段工作得非常好但是我需要将其设置为特定高度，并将'toggle'替换为固定高度，例如'400px'绝对没有...

Answer 1

$('.form-control' ).click(function(e) {

    $(this).addClass('InputFreezeFocus');

    $(this).animate({
       width: '400px'
    }, {
        direction: 'left',
        duration: 500,
    });
    setTimeout( function(){
        $('.input-group .Advanced').animate({
           height: '400px',
           opacity: 'toggle'
        }, {
            duration: 500,
        });
    } , 500);
});

.animate()方法不会将隐藏元素视为效果的一部分，因此您必须切换不透明度。

Link to fiddle

Answer 2

由于您已为display:none课程设置了.Advanced，因此您的指定身高无效。当你使用jquery内置的toggle字符串时，它将处理它并使你的隐藏元素处于视图中。但是，当你定义自己的高度时，你还必须在视图中显示该元素，否则动画将工作但不显示。你可以参考Jquery animate() reference。它写在那里

注意：与.slideDown（）和.fadeIn（）等速记动画方法不同，.animate（）方法不会将隐藏元素作为效果的一部分显示。例如，给定$（“someElement”）。hide（）。animate（{height：“20px”}，500），动画将运行，但元素将保持隐藏状态。

您可以这样做来为您的课程制作动画

setTimeout( function(){
        $('.input-group .Advanced').animate({
           height: '500px',
          opacity:'show'
        }, {
            duration: 500
        });
    } , 500);

这会让你的隐藏元素进入视野。Demo of your code

JQuery .animate（）;不使用固定高度

2 个答案: