제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ 채택완료

왕초보초보

7년 전 조회 2,132

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

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

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

</p>

<p><!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></p>

<p></div></p>

<p></body>

</body>

</html></p>

<p>

</p>

<p>body{

    margin: 0;

    padding: 0;

}

#wrap {

    position: relative;

    width: 100%;

    height: 2000px;

    background: gold;</p>

<p>    

}</p>

<p>ul,li {

    margin: 0;

    padding: 0;

}</p>

<p>

#a {

    position: fixed;

    width: 200px;

    height: 50px;

    background: pink;

    float: left;

    top: -50px;

    z-index: 20;</p>

<p>}</p>

<p>#b {

    position: fixed;

    width: 400px;

    height: 50px;

    background: skyblue;

    float: left;

    left: 0px;

    z-index: 10;

}</p>

<p>

</p>

<p>$(document).ready(function() {

    $(window).scroll(function(){

        

        // var scroll = $(document).scrollTop();</p>

<p>        var a = $('#a')

        var b = $('#b')

        if ($(this).scrollTop() > 300){</p>

<p>            $(b).stop().animate({ "left": "+200" }, 200, function () { 

            $(a).stop().animate({ "top": "0" }, 200); 

                }); </p>

<p>            // $(b).stop().animate({"left":"+200"},500);

            // $(a).stop().animate({"top":"0"},500);

                                

        }

        else {

            </p>

<p>                $(a).stop().animate({ "top": "-50" }, 200, function () { 

                $(b).stop().animate({ "left": "0" }, 200); 

             }); </p>

<p>            // $(a).stop().animate({"top":"-50"},500);

            // $(b).stop().animate({"left":"0"},500);

            

            

            }</p>

<p>    });

});</p>

<p>

#제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

유레카56

제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ 채택완료

답변 1개

답변에 대한 댓글 3개

전체 질문 목록

공유하기