jquery 버튼 클릭이 예상대로 결과를 반환하지 않습니다.

jquery에 다음 코드가 있습니다. 내가 코드를 실행하면 jquery 버튼 클릭이 예상대로 결과를 반환하지 않습니다.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#button1").click(function() { 
 
     alert(1) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '100px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '3em' 
 
     }, "slow"); 
 
     }); 
 

 
     $("button").click(function() { 
 
     alert(3) 
 
     var div = $("div"); 
 
     div.animate({ 
 
      left: '50px' 
 
     }, "slow"); 
 
     div.animate({ 
 
      fontSize: '7em' 
 
     }, "slow"); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <button id="button2">Start Animation2</button> 
 
    <button id="button1">Start Animation</button> 
 
    <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> 
 
</body> 
 
</html>

는 시작 animation2 버튼을 처음하지만 두 번째 및 클릭 후 어떤 효과를 실행합니다. 그러나

시작 애니메이션

버튼을 클릭 할 때마다 작동합니다. 나는 특정 버튼 (() 함수를 클릭합니다. 내가 ("# 단추 1을") $를 썼다 때문에 그것이 알고 있습니다.하지만 그건

시작 animation2

에 영향을주지 않습니다 이유 무엇을 할 수

여러 번의 클릭?

출처

2017-04-21 Tom Cruise

var div = $ ("div"); 모든 div 요소를 선택하고 동일한 div 배열을 반환합니다. 좀 더 구체적으로 만드는지 확인해보십시오 (div.animate 대신 클래스를 추가하거나 div [0] .animate라고 말하면 됨) 문제가 해결됩니다. –

생성하려는 효과는 무엇입니까? 선택기가 어떻게 작동하는지 혼란스러워합니다. –

@KilianStinson 애니메이션 효과 –

문제가 선택기 때문입니다. 당신은 #button1 및 button에 이벤트를 첨부했습니다. #button1이 모두 이벤트 핸들러가 실행을 클릭 따라서 때. #button2이 오 을 클릭하면 nybutton에 바인드 된 이벤트 핸들러가 실행됩니다. 끝 상태 인 #button1은 모든 것을 같은 위치에 놓기 때문에 아무 것도하지 않는 것 같습니다. 따라서 이동할 대상이 없습니다.

출처

2017-04-21 07:59:40

두 번째 클릭으로 div를 왼쪽으로 적용하지 않음 : 50px w.r.to를 현재 위치로? –

위치를 50px로 설정했기 때문입니다. 클릭 할 때마다 50 픽셀 씩 증가 시키려면 'left :'+ = 50px''를 사용하십시오. –

Ok. 그러나 브라우저가 현재 위치 또는 초기 위치에서 let : 50px를 어떻게 고려할 것입니까? –

이 때문에

div.animate({ 
    left: '100px' 
}, "slow");`

것이다 SET 당신의 100px-left 재산이 아니라 증가을. 한 번 설정하면 두 번째 설정은 이미 100px에 있으므로 아무 것도 변경되지 않습니다.

출처

2017-04-21 07:59:55

jquery 버튼 클릭이 예상대로 결과를 반환하지 않습니다.

답변

관련 문제