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();

            });
    });

我的动画没有按预期工作

1 个答案: