Question

我正在尝试做这样的事情，当我在菜单中选择另一个东西时，主要内容会上升。

我知道在某种程度上如何做到这一点，我使用的是带有标签的网站的相同概念，如下所示：

$(function(){
                $("#content:First").show();
                $("#wrap a").click(function(){
                    $(".aba").hide();
                    var div = $(this).attr('href');
                    $(div).fadeIn('slow');
                    $('#menu li').css('background', '#03c0f3'); 
                    $(this).parent('li').css('background', '#2ADAF1');

                    return false;
                });

我想知道我可以应用于div（在$（div）上）的效果是什么，或者如果有更好的方法可以做到这一点。

Answer 1

我认为没有任何适合您需求的预定义功能。你必须使用.animate()自己构建它。看起来应该是这样的：

$('#navigation a').click(function(){
    $('#content').css({
        position : 'absolute',
        top : 0,
        left : 0
    }).animate({
        top : -$('#content').height() - 1
    }, 250, function(){
        // Change content here
        // Animate it back
    });
});

或者，许多其他网站正在使用，您可以在一个页面中传送整个内容并分别滚动（example）。为此，请查看不同的插件，例如this one。

Answer 2

就像@ d3c0y的想法一样，为什么不把它变成可滚动的内容，只是滑到click()上的内容。

$('nav a').click(function (e) {
    e.preventDefault();
    var div = $(this).attr('href'),
        //get the contents offset top position
        offsetTop = $(div).offset().top;
    //animate scrolling to the contents
    $('body, html').animate({
        scrollTop: offsetTop
    }, 'slow');
});

您还可以使用fadeTo()：

应用一些淡化效果

$(div).fadeTo('slow', 1).siblings().fadeTo('slow', 0);

如果你想body {overflow:hidden;}，你也可以删除滚动条，滚动/锚定仍然有用。

请参阅此jsfiddle。

对Jquery的影响

2 个答案: