自己写的一段jquery实现当滚动条滑动到某个位置实现向中间移动

Posted 2020-11-20 单大源

实现回调函数：（一个涉及动画的函数之后来执行语句）

 

$("p").hide(1000,function(){
　　alert("The paragraph is now hidden");
});

 

 

自己写的：

<script type="text/javascript">
//    $(document).ready(function() {       
//        $(window).scroll(function() {
//            
//            alert($(window).scrollTop() + " px"); 
//                
//            }

    $(document).ready(function() {       
        $(window).scroll(function() {
            
            if(($(window).scrollTop()) > 500){
                $(".f_a").animate({marginLeft: "0px",opacity:‘1‘,speed:"1500"}, function(){
                    $(".f_aa").animate({
                        marginLeft: "0px",
                        opacity:‘1‘,
                        speed: "slow"
                    },2000);
                });
            }
            

            
            if(($(window).scrollTop()) > 500){
                $(".f_b").animate({marginRight: "0px",opacity:‘1‘},function(){
                    $(".f_bb").animate({
                        marginRight: "0px",
                        opacity:‘1‘
                    },2000);
                });
            }
            
            
//            $("p").hide(1000,function(){
//                alert("The paragraph is now hidden");
//            });
            
            
            
            if(($(window).scrollTop()) > 1800){
                $(".f_c").animate({marginLeft: "0px",opacity:‘1‘},function(){
                    $(".f_cc").animate({
                        marginLeft: "0px",
                        opacity:‘1‘
                    },2000);
                });
            }
            
            
            if(($(window).scrollTop()) > 1800){
                $(".f_d").animate({marginRight: "0px",opacity:‘1‘},function(){
                    $(".f_dd").animate({
                        marginRight: "0px",
                        opacity:‘1‘
                    },2000);
                });
            }
            
            
//            if(($(window).scrollTop()) > 3200){
//                $(".f_e").animate({
//                        marginTop: "40px",
//                        opacity:‘1‘
//                    });
//            }
            
            
            if(($(window).scrollTop()) > 3200){
                $(".f_e").animate({marginTop: "40px",opacity:‘1‘},function(){
                    $(".f_ee").animate({marginTop: "40px",opacity:‘1‘},function(){
                        $(".f_eee").animate({
                            marginTop: "40px",
                            opacity:‘1‘
                        });
                    });
                });
            }
            

            if(($(window).scrollTop()) > 4100){
                $(".f_f").animate({
                        marginTop: "40px",
                        opacity:‘1‘
                    });
            }

        });
        
    });

</script>