Jquery에서 애니메이션 탐색 막대를 만들려고합니다.

Jquery로 탐색 막대를 만들려고합니다. 아이디어는 네비게이션 버튼을 클릭하면 몇 개의 링크 (div 형태로)가 사라지게됩니다. 그러나 초기 클릭 동작을 수행 할 수 없습니다. 현재 #clickme 버튼을 클릭 한 후 #Home 버튼을 왼쪽으로 100px 이동하려고합니다.Jquery에서 애니메이션 탐색 막대를 만들려고합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src = "jquery-2.0.1.js"></script> 
<script> 
$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} , "fast"); 
}); 


</script> 
<style type="text/css"> 
#Nav { 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:1; 
    top: 268px; 
    left: 530px; 
    background-color: blue; 
} 
.Button{ 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:0; 
    background-color:#693; 
} 
</style> 
</head> 

<body> 
<div id="Nav"> 
    <div id="Home" Class = "Button">Home</div> 
    <div id="About" Class = "Button">About The Internship</div> 
    <div id="Meet" Class = "Button">Meet the Interns</div> 
    <div id="Request" Class = "Button">Request an Intern</div> 
    <div id="clickme" Class = "Button">Navigation</div> 
</div> 


</body> 
</html>

출처

2013-06-18 Jpm61704

가 왜 바퀴를 개혁하고 있습니다. 액세스 할 수있는 많은 메뉴 플러그인이 있습니다. [모두가 마우스를 사용하지 않습니다.] – epascarello

당신 + 준비 잘못된 셀렉터를 선택하십시오.

.ID가

#ID는

출처

2013-06-18 13:04:19 Christian

id 선택기가 잘못되었습니다. 코드는해야한다 :

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,'fast'); 
});

이 야해 문제가 아니라 스크립트 태그는 type 속성을 가지고 있어야 당신이 HTML5를 사용하지 않기 때문에 :

당신은 당신의 DOM까지 '기다릴 필요가

<script type="text/javascript" src="jquery-2.0.1.js"></script>

출처

2013-06-18 13:03:32 stackErr

나는이 수정 작업을했으며 여전히 제대로 작동하지 않습니다. 업데이트 된 코드는 – Jpm61704

입니다. 내 솔루션을 사용해보십시오. – Christian

@stackErr 따옴표가 없습니다. $ ("# Home"). animate ({left : 100}, "fast"); – Praveen

문제가 셀렉터 것 같다 .. 실제 ID의

$(function(){ 
    $("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,"fast"); 
    }); 
})

이 작동합니다위한 클래스 (CSS)에 대한 것입니다. ID가

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,fast); 
});

당신이 페이지 하단에 </body> 스크립트를 사용하기 전에 아래에이 코드를 배치 할 수 있습니다 시도 .

와 #하지와 함께 사용되어야하는 것은 DOM이 준비가되면 & 실행 빠르게 페이지를 만든다. 그렇지 않은 경우 코드를 $(function())으로 바꿉니다.

출처

2013-06-18 13:05:13

StackErr의 답변 외에도 에 'fast'가 문자열로 전달되어야합니다.

바이올린 : http://jsfiddle.net/jonigiuro/xt57a/

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,'fast'); 
}

출처

2013-06-18 13:05:34

죄송합니다. – stackErr

Jquery에서 애니메이션 탐색 막대를 만들려고합니다.

답변

관련 문제