Влияние на Jquery

Question

Влияние на Jquery

0

Я пытаюсь сделать что-то вроде этого изображения, основное содержание идет вверх, когда я выбираю другую вещь в меню.

Я знаю, как это сделать, я использую ту же концепцию веб-сайта с вкладками, что-то вроде этого:

$(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).), Чтобы стать таким, или если есть лучший способ сделать это.

PlayMa256 15 дек. 2013, в 02:17

Источник

0

Вы против создания прокручиваемого контента и простого перехода к якорям?
d3c0y 15 дек. 2013, в 01:38

Теги:

javascript

jquery

2 ответа

0

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

В качестве альтернативы, что многие другие сайты используют, вы можете доставить весь контент на одной странице и прокрутить соответственно (пример). Для этого взгляните на разные плагины, например, на этот.

Kiruse 14 дек. 2013, в 22:52

Ещё вопросы

Вы против создания прокручиваемого контента и простого перехода к якорям?

Mark S · Accepted Answer · 2013-12-14T23-44-00.000Z

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