javascript - slideToggle 动画 "show"但不是 "hide"

Question

我有一个 100% 高度的网站，它有一个隐藏的页脚，需要向上滑动并在单击按钮时显示它，当再次单击该按钮时，它应该向下滑动并隐藏它。

问题是滑动动画只在页脚向上滑动时起作用，而当它应该向下滑动时，它会颠簸而没有动画。

看问题就对了​​here ，通过单击页脚中的“更多”按钮。用于操作该按钮的 JS 代码如下:

$(document).ready(function(){

    $(".footer_container").hide();
    $(".show_hide").show();    

    $('.show_hide').click(function(){

        var speed = "500";
        $(".footer_container").slideToggle(speed);

        $('html, body').animate({
          scrollTop: $(document).height()
        }, speed);

    });
});

提前致谢!

更新:我刚刚试过这段代码:

$('.show_hide').click(function(){

    var speed = "500";
    $(".footer_container").toggle(speed);

    $('html, body').animate({
      scrollTop: $(".footer_container").offset().top + $('window').height()
    }, speed);

});

显然，页脚上有一个我不知道存在的动画。也许这就是这个问题的原因？

Answer 1

好吧，我试了一下:

$('.show_hide').unbind()
$('.show_hide').click(function () {
    var speed = "500";
    $(".footer_container").toggle(speed);

    if ($(".footer_container").data('can-see')) {
        var displaced = $('.footer_container').height();
        $('.twitter_footer').animate({
            marginTop: "600px",
        }, {
            duration: speed,
            complete: function () {
                $('.twitter_footer').css('margin-top', "0");
            }
        });
    }

    $('html, body').animate({
        scrollTop: $(".footer_container").offset().top + $('window').height()
    }, speed);

    $(".footer_container").data('can-see', !$(".footer_container").data('can-see'))

});

演示 http://jsfiddle.net/DPq5Z/

同样的结果，另一种方式(使用绝对定位以保持上面的元素不受干扰):

$('.show_hide').unbind()
$('.show_hide').click(function () {
    var speed = "500";
    $(".footer_container").fadeToggle(speed);

    if ($(".footer_container").data('can-see')) {
        slide_down('.twitter_footer', speed);
        slide_down('.button_bg', speed);

    }

    $('html, body').animate({
        scrollTop: $(".footer_container").offset().top + $('window').height()
    }, speed);

    $(".footer_container").data('can-see', !$(".footer_container").data('can-see'))

});

function slide_down(c, speed){
    var tp = $(c).offset().top;
        $(c).css({
            'position': 'absolute',
                'top': tp + "px"
        });
        $(c).animate({
            top: tp + 170 + "px",
        }, {
            duration: speed,
            complete: function () {
                $(c).css({
                    'position': "relative",
                     'top': '0'  
                });
            }
        });
    }

演示 http://jsfiddle.net/9R6L4/