JqueryUI-컬러 애니메이션

jQueryUI는 일부 핵심 jQuery 메서드를 확장하여 요소에 대한 다양한 전환을 애니메이션 할 수 있습니다. 그중 하나는 애니메이션 방법입니다. jQueryUI는 jQuery animate 메서드를 확장하여 애니메이션 색상 지원을 추가합니다. 요소의 색상을 정의하는 여러 CSS 속성 중 하나에 애니메이션을 적용 할 수 있습니다. 다음은 animate 메서드가 지원 하는 CSS 속성입니다 .

backgroundColor − 요소의 배경색을 설정합니다.
borderTopColor − 요소 테두리 상단의 색상을 설정합니다.
borderBottomColor − 요소 테두리의 아래쪽 색상을 설정합니다.
borderLeftColor − 요소 테두리의 왼쪽 색상을 설정합니다.
borderRightColor − 요소 테두리의 오른쪽 색상을 설정합니다.
color − 요소의 텍스트 색상을 설정합니다.
outlineColor− 외곽선의 색상을 설정합니다. 요소를 강조하는 데 사용됩니다.

통사론

다음은 jQueryUI 애니메이션 방법 의 구문입니다 -

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

이 메서드에서 다음으로 구분하여 원하는 수의 속성을 설정할 수 있습니다. , (반점).

예

다음 예제는 addClass () 메소드 의 사용을 보여줍니다 .

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. animateexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

버튼을 클릭하고 상자의 애니메이션이 어떻게 변경되는지 확인하십시오.