Интерактивное меню js с плавным отображением / скрытием содержимого и прокруткой вверх с помощью jquery

У меня проблемы с созданием полностью плавного меню отображения / скрытия и прокрутки с помощью jQuery
Есть ли лучшее решение, чем это?

СМОТРЕТЬ ПОЛНУЮ ДЕМО НА JSFIDDLE

JS:

$(document).ready(function(){    

    $("#showIndex1").click(function(){
        $("#index1").show(1500);
        $("#index2").hide(1500)
    });
    $("#showIndex2").click(function(){
        $("#index2").show(1500);
        $("#index1").hide(1500)
    });

   $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop':  $target.offset().top - 20

    }, 1600, 'swing', function () {
        window.location.hash = target;
        });
});

});

HTML:

<div style="width: 100px">

<a href="#indexAchor1" id="showIndex1"><h2 id="indexAchor1">index1</h2></a>
<div id="index1" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<a href="#indexAchor2" id="showIndex2"><h2 id="indexAchor2">index2</h2></a>
<div id="index2" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</div>

СМОТРЕТЬ ПОЛНУЮ ДЕМО НА JSFIDDLE

В чем твоя проблема?

Smit Raval 11.04.2018 12:15

Если вы видите демку, она не работает .. И действие не плавное, а скачки в конце .. А есть способ лучше написать?

iolli 11.04.2018 18:15
0
2
108
1

Ответы 1

Измените свой JS на это.

$(document).ready(function(){    
    $(".home").click(function(){
        $("#index1, #index2, #index3").hide();
    });
    $("#showIndex1").click(function(){
        $("#index1").show();
        $("#index2, #index3").hide()
    });
    $("#showIndex2").click(function(){
        $("#index2").show();
        $("#index1, #index3").hide()
    });
    $("#showIndex3").click(function(){
        $("#index3").show();
        $("#index1, #index2").hide()
    });
   $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop':  $target.offset().top

    }, 1600, function () {
        window.location.hash = target;
        });
});

});

Вот скрипка

Обновлять

скрипка

Спасибо, но мне нужно, чтобы меню открывалось и закрывалось тоже с плавной задержкой около 1000 ..

iolli 12.04.2018 13:28

Я ценю твои усилия. Но мне нужно, чтобы шкура была гладкой! открытие - закрытие и прокрутка все плавно ..

iolli 13.04.2018 17:12

Другие вопросы по теме