JQUERY 슬라이딩 도어 효과 - jsFiddle에서는 작동하지만 크롬에서는 작동하지 않습니다.

jquery를 사용하여 슬라이딩 도어 효과를하려고합니다. 나는 jsFiddle에서 그것을 조롱했고 거기에서 괜찮습니다. 내가 가진 문제는 로컬로 실행하면 아무 것도 작동하지 않는다는 것입니다. 나는 다운로드하여 jquery 라이브러리에 로컬로 링크되어 있고 API에 링크 된 다른 프로젝트가 있으며 잘 작동합니다. 내가 무슨 일이 벌어지고 있는지 이해하지 못한다. 모든 정보가 제대로로드되었다는 것을 알 수 있지만 링크를 클릭해도 아무 일도 일어나지 않는다. 여기 JQUERY 슬라이딩 도어 효과 - jsFiddle에서는 작동하지만 크롬에서는 작동하지 않습니다.

은 링크를 jsfiddle http://jsfiddle.net/aosto/kU9HY/

편집이다 : 또한 내 코드가 작동하지 않는 것을 발견했다. 나는 궤도에 진입 한 방향 인 how to make a sliding door effect?을 팔로우하고 있습니다. 하지만 나는 CSS가 엉망이 될 수도 있다고 생각합니다. 처음에는 다른 사람들을 숨기고 어떻게 보이게하는지 잘 모릅니다. 어떤 도움을 주시면 감사하겠습니다.

<!doctype html> 
<html> 
<head> 
<title>DBKustoms</title> 
<link rel="stylesheet" href="./css/style.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> 
<script src="./js/include.js"></script> 

</head> 
<body> 

<div id="menu-container"> 
    <div id="cover"></div> 
    <div id="menu-home" class="menu"></div> 
    <div id="menu-contact" class="menu">contact</div> 
    <div id="menu-services" class="menu"></div> 
    <div id="menu-photo" class="menu"></div> 
</div> 


<div id="buttons"> 
    <div id="home" class="menu-button">Home</div> 
    <div id="contact" class="menu-button">Contact</div> 
    <div id="services" class="menu-button">Services</div> 
    <div id="photo" class="menu-button">Photo</div> 
</div> 

</body> 
</html>

CSS를

#menu-container { 
    float:left; 
    width: 200px; 
    height: 300px; 
    clip: auto; 
    overflow: hidden; 
    position: relative; 
    } 

#cover { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: -200px; 
    background: black; 
    z-index:1000;  
    } 

#menu-home { 
    width:100%; 
    height:100%; 
    background:blue; 
    } 

#menu-services { 
    Height:100%; 
    width:100%; 
    background:purple; 

    } 

#menu-contact { 
    Height:100%; 
    width:100%; 
    background:yellow; 
    } 

#menu-photo { 
    Height:100%; 
    width:100%; 
    background:brown; 

} 

#buttons { 
    float:left; 
}

과 JS

$('.menu-button').click(function() { 
    var cMenuButton = $(this); 
    var cMenuID = cMenuButton.attr('id'); 

    var coverHeight = $('#cover').height(); 
    var cVisibleMenu = $('.menu:visible'); 
    var cVisibleHeight = cVisibleMenu.height(); 

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() { 
     $('.menu').hide(); 
     $('#menu-' + cMenuID).show(); 

     var newMenuHeight = $('#menu-' + cMenuID).height(); 
     var coverHeight = $('#cover').height(); 

     $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear'); 
    }); 
});

출처

2012-10-19 T0w3ntuM

당신은 준비가 DOM 후로드 있도록 JSFiddle 당신을 위해 그 일을한다

$(function(){ 
    // your js here 
})

... JQuery와 물건을 포장 할 필요가있다. 로컬에서 발생하는 문제는 문서가로드되기 전에 javascript가 실행되므로 선택기를 선택하면 선택할 항목이 없습니다. DOM이 준비된 후에 실행하면 정상적으로 페이지의 HTML 요소를 선택할 수 있습니다.

출처

2012-10-19 18:53:15

document.ready에 코드를 삽입해야합니다. jsfiddle에는 코드를 래핑하는 onDomReady 옵션이있는 왼쪽에 드롭 다운이 있습니다. 로컬에서는 그렇지 않으므로 jsfiddle에서 작동합니다.

$(function(){ 

    // code here 
})

출처

2012-10-19 18:52:45

그건 의미가 있습니다. 미안, 나는이 모든 것에 상당히 새로운 것이다. – T0w3ntuM

귀하의 문제를 해결하는 데 도움이 되었다면 답을 표시하십시오. 감사! –

JQUERY 슬라이딩 도어 효과 - jsFiddle에서는 작동하지만 크롬에서는 작동하지 않습니다.

답변

관련 문제