我的动画没有按预期工作

时间:2015-03-31 05:09:24

标签: javascript jquery html css jquery-animate

我试图在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>

1 个答案:

答案 0 :(得分:0)

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

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

            });
    });