Question

我遇到了jquery的slideToggle（）问题。我正在使用以下内容切换我的页脚：

$(document).ready(function(){
    $('.close').click(function(){

            $('#footer').slideToggle();
            if( $(this).hasClass('active') )
                $(this).text('show');
            else
                $(this).text('hide');

        $(this).toggleClass('active');
    });     
});

在一个很长的网站上。当我关闭或打开页脚时，我总能看到我用来切换页脚的div，但重新打开时，页脚滑出屏幕（这样你就不得不向下滚动以便看到它。）。如何改变这一点，以便在我目前所在的屏幕部分显示页脚？（好吧，我希望它清楚我的意思是因为我无法将任何内容上传到我的webhoster大气压）。

http://jsfiddle.net/bm45k0ps/

Answer 1

您可以这样做：

版本1：同时动画..

        $('#footer').slideToggle(500);
         $('html, body').animate({
                scrollTop: $("#footer").offset().top + $("#offset").height()
            }, 500);

版本2：完成slideToggle后的动画..

        $('#footer').slideToggle(function(){
            $('html, body').animate({
                scrollTop: $("#footer").offset().top + $("#offset").height()
            }, 500);
        });

查看此Fiddle ...

Answer 2

请检查Demo

$(document).ready(function(){
        $('.close').click(function(){

            $('#footer').slideToggle(function(){

            }, function(){
            $('html, body').animate({ 
            scrollTop: $("#footer").offset().top + $("#offset").height()
        }, 800);
            });
                if( $(this).hasClass('active') )
                    $(this).text('Footer anzeigen');
                else
                    $(this).text('Footer verbergen');

            $(this).toggleClass('active');


        });

});

你可以做这样的事情

slideToggle（）从屏幕切换出来

2 个答案: