jQuery 애니메이션 연결

jQuery를 통해 액션/메서드를 연결할 수 있습니다. 체인을 사용하면 하나의 명령문에서 여러 jQuery 메서드(동일한 요소에 대해)를 허용할 수 있습니다.

지금까지 우리는 jQuery 문을 한 번에 하나씩(한 번에 하나씩) 작성했습니다. 그러나 동일한 요소에 대해 여러 jQuery 명령을 차례로 실행할 수 있는 체인이라는 기술이 있습니다. 팁: 이렇게 하면 브라우저가 동일한 요소를 여러 번 찾을 필요가 없습니다.

작업을 연결하려면 이전 작업에 작업을 추가하기만 하면 됩니다.

예제 1. 다음 예제에서는 css(), SlideUp() 및 SlideDown()을 함께 연결합니다. "p1" 요소가 먼저 빨간색으로 변한 다음 위로 슬라이드한 다음 아래로 슬라이드합니다.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function()  
  {  
  $("button").click(function(){  
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);  
  });  
});  
</script>  
</head>  
<body>  
<p id="p1">jQuery 乐趣十足！</p>  
<button>点击这里</button>  
</body>  
</html>

필요한 경우 여러 메서드 호출을 추가할 수도 있습니다. 팁: 링크할 때 코드 줄이 엉망이 됩니다. 그러나 jQuery는 구문에 대해 그다지 엄격하지 않습니다. 줄 바꿈 및 들여쓰기를 포함하여 원하는 형식으로 작성할 수 있습니다.

예제 2, 다음과 같이 작성하면 실행할 수도 있습니다.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function()
        {
            $("button").click(function(){
                $("#p1").css("color","red")
                        .slideUp(2000)
                        .slideDown(2000);
            });
        });
    </script>
</head>
<body>
<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>
</body>
</html>

jQuery는 여분의 공백을 버리고 위의 코드 줄을 하나의 긴 코드 줄로 실행합니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery 乐趣十足！</p> <button>点击这里</button> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear