제이쿼리 질문드립니다. 제발 부탁드립니다 ㅠㅠ
본문
현재 스크롤시 일정 위치에가면 해당 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);
}
});
});
답변 1
해당 소스로 확인해 보았는데 딱히 어떤 동작을 원하시는지도 잘 모르겠고 오류나 부자연스러운 부분도 어떤 부분인지 잘 모르겠습니다. 일단 콘솔에 에러도 잡히지 않구요. 뭐 딱히 이상한 점이라고 한다면 body 가 두번 닫겨 있다는거? 그부분은 수정 하셔야 겠네요
답변을 작성하시기 전에 로그인 해주세요.