0

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

问题是滑动动画只有在页脚向上滑动时才起作用，而当它应该向下滑动时，它会在没有动画的情况下发生碰撞。

通过单击页脚中的“更多”按钮，您可以在此处看到问题。用于操作该按钮的 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);

});

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

4

2 回答 2

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/进行演示

于 2013-07-04T10:59:52.397 回答
0

它与 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/

于 2013-07-04T10:26:34.987 回答