0
어떤 이유로 사용자가 링크에서 여러 번 클릭하지 못하게하는 것처럼 보일 수 없습니다. 사용자가 묶음을 클릭하면 이미지가 앞뒤로 번지 게됩니다. 내가 뭘 잘못하고 있는지 생각해?실행 중 기능이 여러 번 실행되지 않는 경우
$(document).ready(function() {
console.log("Welcome to my portfolio. Glad you made it!");
$(".nav-bar ul li").click(function() {
var image = $(".nav-move");
var link = $(this);
var running = false;
var imagePos = $(".nav-move").position().left;
var linkPos = $(this).position().left;
var count = 0;
if (imagePos < linkPos && running == false) {
console.log(imagePos + ", " + linkPos + ", " + link.width());
right();
running = true;
} else if (imagePos > linkPos && running == false) {
console.log(imagePos + ", " + linkPos + ", " + link.width());
left();
running = true;
}
function right() {
count++;
image.css({
"left": imagePos + count + "px"
})
imagePos = $(".nav-move").position().left;
if (imagePos + (image.width()/2) < linkPos + (link.width()/2)) {
setTimeout(right, 20);
} else {
running == false
}
}
function left() {
count--;
image.css({
"left": imagePos + count + "px"
})
imagePos = $(".nav-move").position().left;
if (imagePos + (image.width()/2) > linkPos + (link.width()/2)) {
setTimeout(left, 20);
} else {
running == false
}
}
})
});.nav-bar {
position: absolute;
bottom: 0;
padding: 10px 0 30px;
background: #000;
color: #fff;
}
.nav-bar ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
.nav-bar ul li {
display: inline;
padding: 0;
font-size: 35px;
font-weight: bold;
font-family: 'Indie Flower', cursive;
}
.nav-bar ul .sub-item {
display: none;
}
.main-content {
background: #fff;
}
.nav-move {
position: absolute;
padding: 0px;
margin: -10px;
}
.guy-running {
display: none;
}
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html>
<head>
<title>Portfolio Page</title>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="stylesheets/style.css">
<!-- Javascript Files -->
<script type="text/javascript" src="js/home.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 main-content">
<!-- Home -->
<div class="home-content">
Test Home-Content
</div>
<!-- About -->
<div class="about-content">
Test About-Content
</div>
<!-- Portfolio -->
<div class="portfolio-content">
Test Portfolio-Content
</div>
<!-- Contact -->
<div class="contact-content">
Test Contact-Content
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio
<ul class="sub-item">
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</li>
<li>Contact</li>
</ul>
<div class="images">
<img class="nav-move" src="assets/nav-img.png" alt="">
<img class="guy-running" src="assets/guy-running.gif" alt="">
</div>
</div>
</div>
</div>
</body>
</html>PS : 어떤 이유로, 아래 링크를 이미지를 중심으로하는 것은 중 하나가 작동하지 않습니다/질문과 관련이 있지만, 단지 보조 노트 없습니다.
가능한 중복 http://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple -times) –