Question

我当前的脚本工作正常，然后3个菜单按钮（menubtn1，menubtn2，menubtn3）使容器更改高度。我想要做的是让脚本首先将高度设置为0px，然后设置为各自的高度。

这样我可以在高度= 0px时替换我的容器内容，然后当它向后缩放时，新内容将可见。

到目前为止我的脚本是：

$(document).ready(function() {

    $(".menubtn1").click(function() {
        $(".container").stop().animate({
            height: '350px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn2").click(function() {
        $(".container").stop().animate({
            height: '200px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });
    $(".menubtn3").click(function() {
        $(".container").stop().animate({
            height: '185px'
        }, {
            queue: false,
            duration: 600,
            easing: 'easeInOutQuint'
        })
    });

});

Answer 1

您可以使用.slideUp()和.slideDown()代替使用.animate()，如下所示：

$(".container")
   .slideUp("slow", function () {
      $(this)
          .html("<p>New content</p> and some other stuff")
          .slideDown("slow");
   });

修改

更新了示例，使用slideUp-callback更改内容，然后再将其向下滑动。

Answer 2

可以只为你的动画调用添加一个回调函数，该函数调用另一个动画函数来打开容器。

Answer 3

您可以在“完整”回调函数中添加内容，然后再次为其设置动画：

$(".container").stop().animate({height:0},{queue:false, duration:600, easing: 'easeInOutQuint', complete: function(){
    $(this).html('your content').animate({height:350},600);
}})

我也更新了你的小提琴:) http://jsfiddle.net/RpzpZ/3/

这是另一种变体。那可能就是我会这样做的。我直接在html中添加了内容。我不知道你是否需要不同内容的固定高度，这里我使用了slideUp和Down，所以它总是会调整到内容的高度

http://jsfiddle.net/RpzpZ/5/

Answer 4

你可以这样做 - ＆gt;

$(document).ready(function() {
$("#menubtn1").click(function() {
        $(".container").animate({height:"0px"},  function () {
            $("#hidden-content").hide();
            $("#show-content").show( function () {
                $(".container").animate({height:"200px"})   
            });
        });
    });
});

jQuery动画高度一步一步

4 个答案: