JqueryUI - Hoạt ảnh màu

jQueryUI mở rộng một số phương thức jQuery cốt lõi để bạn có thể tạo hiệu ứng chuyển đổi khác nhau cho một phần tử. Một trong số đó là phương pháp hoạt ảnh . jQueryUI mở rộng phương thức jQuery animate , để thêm hỗ trợ cho màu hoạt hình. Bạn có thể tạo hoạt ảnh cho một trong một số thuộc tính CSS xác định màu sắc của phần tử. Sau đây là các thuộc tính CSS mà phương thức animate hỗ trợ.

backgroundColor - Đặt màu nền của phần tử.
borderTopColor - Đặt màu cho mặt trên của đường viền phần tử.
borderBottomColor - Đặt màu cho mặt dưới của đường viền phần tử.
borderLeftColor - Đặt màu cho phía bên trái của đường viền phần tử.
borderRightColor - Đặt màu cho phía bên phải của đường viền phần tử.
color - Đặt màu văn bản của phần tử.
outlineColor- Đặt màu cho đường viền; dùng để nhấn mạnh yếu tố.

Cú pháp

Sau đây là cú pháp của phương thức hoạt ảnh jQueryUI :

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

Bạn có thể đặt bất kỳ số lượng thuộc tính nào trong phương pháp này được phân tách bằng , (dấu phẩy).

Thí dụ

Ví dụ sau minh họa việc sử dụng các phương thức 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML animateexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Nhấp vào nút và xem hoạt ảnh thay đổi của hộp như thế nào.