Trigger CSS переход на якорь на JavaScript

Question

У меня есть простая проблема, которую я не знаю, как бороться с ним, потому что я учусь JavaScript

То, что я хочу сделать, это ссылка навигация на якорь с постепенным переходом на CSS. Для этого я должен получить текущий идентификатор страницы и привязку href с помощью JavaScript и вызвать эффект CSS.

Это то, что я до сих пор:

$('.btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var next = $(this).attr('href'); 
 
    $(this).parent().addClass('fadeout', function() { 
 
     setTimeout(function() { 
 
      $(this).parent().css('display', 'none'); 
 
     }, 1000); 
 
    $('#' + next).css('display', 'block'); 
 
    $('#' + next).addClass('fadein'); 
 
    }); 
 
});

.fadeout { 
 
    opacity: 0; 
 
    transition: all 1000ms ease; 
 
} 
 

 
.fadein { 
 
    opacity: 1; 
 
    transition: all 1000ms ease; 
 
} 
 

 
#page2, 
 
#page3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="page1"> 
 
    Page 1 Content 
 
    <br> 
 
    <a href="page2" class="btn">Show Page 2 and hide this page</a> 
 
    <br> 
 
    <a href="page3" class="btn">Show Page 3 and hide this page</a> 
 
</div> 
 

 
<div id="page2"> 
 
    Page 2 Content 
 
    <br> 
 
    <a href="page1" class="btn">Show Page 1 and hide this page</a> 
 
    <br> 
 
    <a href="page3" class="btn">Show Page 3 and hide this page</a> 
 
</div> 
 

 
<div id="page3"> 
 
    Page 3 Content 
 
    <br> 
 
    <a href="page1" class="btn">Show Page 1 and hide this page</a> 
 
    <br> 
 
    <a href="page2" class="btn">Show Page 2 and hide this page</a> 
 
</div>

Заранее спасибо за помощь мне обучение

Answer 1

Есть несколько вещей неправильно с вашим кодом:

• Метод addClass только ожидает 1 параметр, так что второй параметр (функция) никогда не будет вызван.
• this Внутри вашего обратного вызова с таймаутом не так, как вы думаете. this ведет себя несколько странно, и его трудно понять, особенно когда вы только начинаете с javascript. Я не буду объяснять это здесь (много информации там), но в этом случае я буду кэшировать значение внутри переменной вне функции таймаута.
• Вы добавляете классы в fadeout, но вы никогда не удаляете их снова, когда вы исчезаете. Я бы удостоверился, что в вашем HTML все видимые «страницы» имеют класс fadein, а невидимые - класс fadeout. Таким образом, вы можете просто переключаться между собой для переключения состояния.
• jQuery предлагает методы show() и hide(), поэтому я бы использовал их вместо изменения значения display.
• jQuery действительно предлагает метод fadeIn и fadeOut, которые, вероятно, лучше всего подходят здесь, но давайте придерживаться вашей анимации css здесь ради вашего «упражнения».
• Если вы используете селектор jQuery более одного раза, целесообразно поместить его внутри переменной. Таким образом, анализ DOM должен выполняться только один раз. Поскольку ваш DOM становится более сложным, на самом деле это довольно дорогостоящая операция.

Так с этим сказал, вы Javascript будет выглядеть примерно так:

$('.btn').click(function(e) { 
    e.preventDefault(); 
    var $target = $(this); 
    var $next = $('#' + $(this).attr('href')); 
    $target.parent().toggleClass('fadeout fadein'); 
    setTimeout(function() { 
    $target.parent().hide(); 
    $next.show(); 
    $next.toggleClass('fadein fadeout'); 
    }, 1000); 
}); 

Посмотрите на код в действии: https://jsfiddle.net/rr7a7sL4/