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/

进行演示

Answer 2

它可以像jQuery中的默认动画一样工作。如果你想自定义这个。你需要使用jQuery缓动插件。它将缓动效果作为参数，如easeIn，easeOut，Bounce等。它控制流量。默认情况下，它是线性的，这就是你所看到的。

缓解插件：https://github.com/gdsmith/jquery.easing

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

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

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

});

jsFiddle：http://jsfiddle.net/vvmYH/4/

slideToggle动画“显示”而不是“隐藏”

2 个答案: