我的动画没有按预期工作

My animations arent working as expected

本文关键字:工作 动画 我的      更新时间:2023-09-26

im试图在5秒钟后淡出视频,然后在按下按钮后淡出视频。然后将页面滚动到下一节。

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

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

只有最后两个滚动按钮可以工作。。。。我不明白为什么只有最后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>

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

$('#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();
            });
    });