JS를 통한 CSS 전환 시작 작동하지 않습니다.

Question

버튼을 클릭하면 background-color 및 크기가 변경되는 CSS 전환을 시작하려고합니다. 그러나 코드에서 실수가 :

js fiddle

jQuery를이

$(function() { 

$('#change').click(function() { 
    $('#box').addClass('change'); 
}); 
}); 

HTML

<div id="box" class="start"></div> 

<div id="button">click</div> 

CSS

.start{ 

height:100px; 
width:100px; 
background: black; 
transition: all 2.0s linear; 
-webkit-transition: all 0.8s linear; 
-moz-transition: all 0.8s linear; 
-ms-transition: all 0.8s linear; 
-o-transition: all 0.8s linear; 
} 

.change{ 
width: 200px; 
height: 200px; 
background:yellow; 
} 

#button{ 
width: 80px; 
height: 20px; 
padding: 4px; 
margin: 5px; 
border:solid 1px black; 
background: grey; 
cursor: pointer; 
color: white; 
} 

Answer 1

HTM에서 버튼의 ID L & CSS (#button)가 JS (#change)의 버튼 ID와 다른 이유입니다.

#change을 #button으로 바꾸는 경우 then it works입니다.

---

주 : 다양한 브라우저를위한 전환 규칙을 나열 할 때, 필요하지 않은 -ms- 일 (IE10은 접두어가 전환을 지원하며, IE9은 전혀 지원하지 않으며, -ms- 접두사 만 필요했다 초기 IE10 미리보기의 경우) 및 은 항상 접두어가 붙지 않는 것을 마지막으로 넣어야합니다 (). 이 시점에서 all current versions of desktop browsers support transitions unprefixed.

Answer 2

귀하의 button의이 button은 change이 아닙니다.

$('#change') 대신 $('#button')을 사용하십시오.

DEMO HERE. 그것은 #button 사용해야

Answer 3

, 당신의 HTML에 따라

$(function() { 
    $('#button').click(function() { 
     $('#box').addClass('change'); 
    }); 
}); 

<div id="button">click</div> 

http://jsfiddle.net/qsAZQ/