jquery - 简单的 fadeOut/In 比我想象的更复杂？

Question

这是我第一次发帖。我经常使用这个网站，发现它对我的学习非常有用。我是 JS/jQuery 的新手。

这是我的代码 http://codepen.io/Dawdre/pen/pjZxZj

HTML:

<div id="page1" class="col-8">
     <h2 class="row-headers">Music</h2>
    <p class="row-txt">Text here.
        <br>
        <br>Text here
        <br>
        <br>Text here</p>
    <br>
     <h2 class="row-headers">Songs</h2>
    <p class="row-txt">Text here</p>
    <br>
</div>
<div id="page2" class="col-8">
     <h2 class="row-headers">Drama</h2>
    <p class="row-txt">Text here
        <br>
        <br>Text here
        <br>
        <br>Text here</p>
    <br>
     <h2 class="row-headers">Contact</h2>
    <p class="row-txt">Text here</p>
</div>

jQuery:

$(document).ready(function () {
    $("#banner").hide(0).delay(0).fadeIn(2000);


    $('#pagetop').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 600);
    });

    $('.menu-btn').click(function () {
        $('html, body').animate({
            scrollTop: $('.row').offset().top
        }, 1000);
    });

});

$(document).ready(function () {
    $('#next-btn').click(function () {
        $('#page1').fadeOut(1000, function () {
            $('#page2').delay(0).fadeIn(2500);
        });
    });

});

'page2' 的 css 是

#page2 {
    display: none;
}

我只想淡出 div 元素“page1”并淡入 div“page2”。我希望能够通过单击“menu-btn”或“next-btn”从一个内容无缝过渡到另一个内容。同时停留在同一页面上。即使以我有限的知识，这似乎是一件相当容易的事情，但到目前为止我被证明是错误的!

有更好的方法吗？我已经使用 hide() 和 animate() 进行了采样。将不透明度设置为 0 并淡入，但 page1 甚至没有消失。 page2 似乎 react 良好，但 page1 对我尝试过的任何类型的 jQuery 都没有反应。

它有点管用……但不是真的。动画似乎中断了，page1 的上半部分并没有完全消失。然后 page2 的淡入开始重叠 page1。然后 page1 立即消失。

基本上它远非一帆风顺。它似乎在某种程度上被打破了。无论是 html、css 还是 JS 相关，在谷歌上搜索和搜索数小时都没有给我答案。

我觉得这更多的是我的代码的问题，而不是实际如何使用 jQuery。虽然我肯定知道会有更好的方法来做这件事，因为我还在学习。谢谢。

Answer 1

我创建了一个非常基本的演示，介绍如何使用 CSS 和 jQuery 进行淡入淡出切换。我喜欢这种方法，因为您可以在没有 jQuery 的情况下使用 CSS 完成很多工作。

HTML:

<button class="btn">Fade Toggle</button>
<img class="img1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/dummy.jpg">
<img class="img2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/animals-q-c-640-480-3.jpg">

CSS:

.img1, .img2{
   position: absolute;
   transition: all 2s ease-in-out;
}

.hide{
   opacity: 0;
}

transition: all 2s ease-in-out; 这行 CSS 是淡入淡出效果神奇之处。

JS:

$('.btn').on("click", function(){
   $('.img2').toggleClass('hide'); 
});

本质上，我们只是使用一点 jQuery 来切换元素类。

CODEPEN DEMO