그누보드 QA - 제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ

제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ

왕초보초보 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.02.09 13:30:57 1689 (121.♡.♡.193)

본문

현재 스크롤시 일정 위치에가면 해당 div들이 순서대로 나오게 할려고 열심히 만들고 있는데요. 얼추 원하는대로 나오기는 했는데. 뭔가 작동이 부자연스럽고. 간혹 작동이 오류가 날때가 있네요. 어디를 수정하면 좋을지 코드 좀 봐주시면 감사드리겠습니다.

지금 이 문제 때문에 한 5-7시간 정도 구글 검색하고 별것 다해봤네요.

부디 문제점을 꼭 알려주시면 감사드리겠습니다.


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/swiper.css"> -->
    
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/time.js"></script>
    <!-- <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/swiper.esm.js"></script>
    <script type="text/javascript" src="js/swiper.esm.bundle.js"></script> -->
    <title></title>
</head>
<body>
<div id="wrap">
    <div id="a">
        
    </div>
    <div id="b">
        
    </div>
</div>
</body>
</body>
</html>


body{
    margin: 0;
    padding: 0;
}
#wrap {
    position: relative;
    width: 100%;
    height: 2000px;
    background: gold;
    
}
ul,li {
    margin: 0;
    padding: 0;
}

#a {
    position: fixed;
    width: 200px;
    height: 50px;
    background: pink;
    float: left;
    top: -50px;
    z-index: 20;
}
#b {
    position: fixed;
    width: 400px;
    height: 50px;
    background: skyblue;
    float: left;
    left: 0px;
    z-index: 10;
}


$(document).ready(function() {
    $(window).scroll(function(){
        
        // var scroll = $(document).scrollTop();
        var a = $('#a')
        var b = $('#b')
        if ($(this).scrollTop() > 300){
            $(b).stop().animate({ "left": "+200" }, 200, function () { 
            $(a).stop().animate({ "top": "0" }, 200); 
                }); 
            // $(b).stop().animate({"left":"+200"},500);
            // $(a).stop().animate({"top":"0"},500);
                                
        }
        else {
            
                $(a).stop().animate({ "top": "-50" }, 200, function () { 
                $(b).stop().animate({ "left": "0" }, 200); 
             }); 
            // $(a).stop().animate({"top":"-50"},500);
            // $(b).stop().animate({"left":"0"},500);
            
            
            }
    });
});