javascript - 我的动画没有按预期工作

Question

我试图在 5 秒后淡入视频，然后在按下按钮后淡出视频，然后将页面滚动到下一部分。

在下一个部分，它应该为一些 div 设置动画，然后....按下按钮转到下一个部分，淡出之前设置动画的 div 的动画，然后转到下一个部分。

第三个滚动按钮根本不起作用。

只有最后 2 个滚动按钮有效....我不明白为什么只有最后 2 个而不是前 3 个星期。

注意:我还想取消页面上的滚动条，并通过滚动按钮导航页面。这是给我带来麻烦的代码:

<script>


$(document).ready(function(){

//Kill Page Scrollbar    
$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
});


//animate the registration video fading in
$('#Video').fadeTo(3000, 1); 
//Make scrollbutton clickable
$('.ScrollButton_White1').click(function(){
//Fade Video out
     $('#Video').fadeTo(3000, 0), (function(){
//define the variable "diamonds"
    var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//                                     
$('html, body').animate({
  scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
    }, 5000,
                            function() {
         diamonds.show();

                          });
     });
});

<!--scroll button 2-->               
$('.ScrollButton_Gold1').click(function(){

         diamonds.hide();   

$('html, body').animate({
            scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
                    }, 5000
 );
});


<!--scroll button 3-->
$('.ScrollButton_White3').click(function(){

        $('html, body').animate({
            scrollTop: $("#ReturnChampion_AnchorPoint").offset().top
                    }, 5000
);                                                                  
});

<!--scroll button 4-->
$('.ScrollButton_Gold1').click(function(){

        $('html, body').animate({
            scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
                    }, 5000);                  


                 });

<!--scroll button 5-->
$('.ScrollButton_Gold2').click(function(){

        $('html, body').animate({
            scrollTop: $("#WhatYouWillLearn_AnchorPoint").offset().top
                    }, 5000);                  


                 });

<!--animate presenter diamond buttons-->
<!--$(window).scroll(function(event) {


            <!--$('#Diamond_DarrenHardy').addClass('animate_rf');
            <!--$('#Diamond_RobertKiyosaki').addClass('animate_rf');-->



    <!--});

<!--end jquery script-->    
});
 </script>

Answer 1

您的代码中似乎有拼写错误

$('#Video').fadeTo(3000, 0), (function() {
        //define the variable "diamonds"
        var diamonds = $('#PresenterContainer').children()
        //animate the scrolling of the page down to the anchor point//
        $('html, body').animate({
                scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
            }, 5000,
            function() {
                diamonds.show();

            });
    });

在 $('#Video').fadeTo(3000, 0), (function() { 如果您想使用 fadeTo 的回调功能，它应该是

$('#Video').fadeTo(3000, 0, function() {
        //define the variable "diamonds"
        var diamonds = $('#PresenterContainer').children()
        //animate the scrolling of the page down to the anchor point//
        $('html, body').animate({
                scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
            }, 5000,
            function() {
                diamonds.show();

            });
    });