アニメーション効果で前のセクションを非表示にしながら、次のセクションにスクロールする

Question

3つのメインセクションをコンテンツでいっぱいにして、srollTopエフェクトを作成しようとしています。私は3つのセクションを持っています。最初のセクションが表示され、2番目と3番目のセクションが表示されます。最初のボタンをクリックして2番目のセクションを表示し、最初のセクションをアニメーションで非表示にした後、2番目のセクションの2番目のボタンをクリックして同じアニメーション効果を実行して2番目のセクションを隠し、 。ここまで私のコードの例です。私はアニメーションでそれを正しく行う方法を理解できません。

$(".button_1").on("click", function() { 
 
    $("html, body").animate({ 
 
    scrollTop: $(".two").offset().top 
 
    }, 1000); 
 
    $(".two").css({ 
 
    "display": "block" 
 
    }); 
 
    $(".one").css({ 
 
    "display": "none" 
 
    }); 
 
});

body { 
 
    height: 3000px; 
 
} 
 

 
.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
.one { 
 
    background: red; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 

 
.two { 
 
    background: orange; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: none; 
 
} 
 

 
.three { 
 
    background: purple; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: none; 
 
} 
 

 
.button_1, 
 
.button_2, 
 
.button_3 { 
 
    border: 0; 
 
    width: 180px; 
 
    height: 40px; 
 
    background: green; 
 
    color: #fff; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="one"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p> 
 
    <button class="button_1">Click me 1</button> 
 
</section> 
 

 
<section class="two"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p> 
 
    <button class="button_2">Click me 2</button> 
 
</section> 
 

 
<section class="three"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p> 
 
    <button class="button_3">Do something else</button> 
 
</section>

Js fiddle example

Answer 1

あなたはそれを表示した後にのみセクションまでスクロールする必要があります。

私はあなたの望むすべてのセクションで動作するようにスクリプトを最適化しました。 クラスbtnをすべてのボタンに置​​きます。

$(".btn").on("click", function() { 
    var section = $(this).closest('section'); 
    var next = section.next('section'); 

    section.slideUp(); 
    next.slideDown(); 
}); 

https://jsfiddle.net/vjm95303/

すべてのベスト：あなたはこのバリアントを使用することができ、それらを非表示にする場合は

$(".btn").on("click", function() { 
    var section = $(this).closest('section'); 
    var next = section.next('section').show(); 

    $("html, body").animate({ 
    scrollTop: next.offset().top 
    }, 1000); 
}); 

してくださいは、https://jsfiddle.net/6y4qwLbq/1/

を見てみましょう。