Jiggery toggleClass가 작동하지 않음 요소에 적용

Question

toggleClass를 적용하려고하지만 새 클래스가 적용되지 않습니다. 무슨 일 이니?

<a href="#" id="cf_onclick">Click</a> 
<div id="main" class="invisible"> 
Hi there    
</div> 

.invisible{ 
    opacity: 0; 

} 
.visible{ 
    opacity: 1; 
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    transition: opacity 3s ease-in-out; 
} 


$(document).ready(function() { 
    $("#cf_onclick").click(function() { 
    $("#main").toggleClass("visible"); 
}); 
}); 

여기에 당신이 당신의 바이올린을 의미하는 경우, 당신은 jsfiddle 윈도우의 왼쪽 상단에, jQuery 라이브러리를 추가하는 잊어 jsFiddle에게

http://jsfiddle.net/Gilgamesh415/grxQX/17/

Answer 1

을합니다.

확인 당신이 당신의 웹 사이트를 의미하는 경우 here

당신이 태그를 머리 속에 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>을 추가하여로드 jQuery 라이브러리를 선택합니다.

(function(){ 
.... //your code 
}(jQuery)); 

대신 가장 좋은 방법은 바로 닫는 </body> 태그 바로 앞에 페이지의 하단에있는 스크립트를로드하는 것입니다 때문에

$(document).ready(function(){...}); 

:

Answer 2

그리고 호출 자체를 사용하여 익명 함수를 시도 , 문서가로드되었는지 ($ (document) .ready()) 점검 할 필요가 없습니다. 이 http://jsfiddle.net/micka/94pNW/

Answer 3

$("#cf_onclick").click(function(e) { 
    e.preventDefault(); 
    $("#main").toggleClass("invisible").toggleClass("visible"); 
}); 

http://jsfiddle.net/grxQX/18/

Answer 4

처럼

이 시도 : 여기

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#s").click(function(){ 

$("#main").toggleClass("n"); 
}); 
}); 
</script> 



<div id="main" class="m"></div> 
<button id="s">click</button> 

<style type="text/css"> 
    .m 
{ opacity:0;} 
.n 
{ 
width:100px; 
    height:100px; 
    border:2px solid yellow; 
    background:green; 
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    transition: opacity 3s ease-in-out; 
    opacity: 1; 
} 
</style> 

데모 : http://jsfiddle.net/65Hg4/1/