Эффекты на JQuery

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

Как идея @ 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.

Answer 2

Я не думаю, что есть какая-либо предопределенная функция, соответствующая вашим потребностям. Вам придется построить его самостоятельно, используя .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.