Javascript 我的动画没有按预期工作

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

在下一节中，它应该为一些div设置动画，然后……按下按钮进入下一节，淡出为先前设置动画的div设置动画，然后进入下一节

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

只有最后两个滚动按钮有效…我不明白为什么只有最后两个，而不是前三周

注意：我还想关闭页面上的滚动条，并通过滚动按钮导航页面。以下是给我带来麻烦的代码：

<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>

---

您的代码似乎有输入错误

$('#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'.fadeTo3000，0，函数{如果您希望使用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();

            });
    });

---

似乎您正在动态创建一些东西，请尝试使用live event。-2-和-4-都使用相同的选择器。ScrollButton_Gold1。菱形是-1-本地的，但是-2-尝试使用它。您应该在控制台中看到一个错误。在编写/检查代码时要更加小心。即使进行了编辑，我的代码仍然没有按照我所希望的方式运行。现在它会显示动画页面加载后立即显示滚动条…我不想看到我更新的代码应该包含在单击处理程序中。请将代码放入JSFIDD中，好吗？您没有添加html，并且替换了我示例中错误的代码部分