jQuery 애니메이션 배경색

Anika Tabassum Era 2024년2월15일

jQuery jQuery Animate

css()를 사용하여 jQuery로 배경색 변경
jQueryUI 라이브러리에서 animate() 메서드 사용
jQuery-colors 플러그인과 함께 animate() 메서드 사용

div 배경색 또는 jQuery 규칙을 사용하는 요소를 변경하는 직접적인 방법은 없습니다. 이는 css() 메서드를 통해 직접 속성을 변경할 수 있지만 일부 jQuery가 부족함을 의미합니다.

jQuery의 css() 메서드는 CSS와 직접 연결되며 대부분의 속성은 상호 교환적으로 영향을 받습니다. 보다 정확하게는 기본 CSS의 한 형태입니다.

우리는 그것이 어떻게 작동하는지 예를 볼 것입니다.

다음으로 animate() 함수를 사용하여 이 작업을 해결할 수 있습니다. 그러나 설명서에 따르면 animate() 메서드는 수치 속성의 경우에만 효과적입니다.

배경색, 색상 등과 같은 숫자가 아닌 속성은 jQueryUI 라이브러리를 추가하지 않는 한 animate() 메서드에서 처리되지 않습니다. 여러 테마와 animate() 기능을 강화할 수 있는 여러 플러그인이 있습니다.

다음 인스턴스도 이 사례에 대한 데모를 제공합니다.

또 다른 쉬운 작업은 기본 플러그인을 추가하여 animate() 메서드를 시작하여 숫자가 아닌 속성을 처리하는 것입니다. 여기에서는 플러그인 jQuery-colors의 예를 통해 주제를 다룰 것입니다.

이제 코드 라인으로 넘어가 봅시다.

`css()`를 사용하여 jQuery로 배경색 변경

고정 차원의 기본 div 요소가 있습니다. 클릭 가능한 버튼이 추가되어 클릭으로 배경색이 변경됩니다.

여기 구문에서 .css({'background-color': 'value'})를 사용하는 것을 알 수 있습니다. 이 방법에는 다양한 색상 기본 설정이 있습니다.

코드 조각:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="my" style="height:100px;width:100px"></div>
  <button id="btn">Hit</button>
<script>
  $(function(){
  $('#btn').click(function () {
     $('.my').css({ 'background-color': 'darkcyan' });
    });
  });
  </script>
</body>
</html>

출력:

배경색에 효과를 적용하려면 css()를 사용하세요

`jQueryUI` 라이브러리에서 `animate()` 메서드 사용

이와 관련하여 두 개의 CDN을 사용합니다. 하나는 js 파일용이고 다른 하나는 테마용입니다.

라이브러리는 다른 여러 플러그인으로도 구성되어 있습니다. 그래서 어떤 의미에서 그것은 대량입니다.

그러나 여기에서 배경 업데이트를 위한 구문은 .animate({backgroundColor: "value"})입니다. 색상에 RGB 값 또는 hex 값을 삽입할 수도 있습니다.

그러나 이에 비해 이 방법은 약간의 색상 준수가 있습니다.

코드 조각:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">Demo</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({
    backgroundColor: "blue"
  });
});
</script>
</body>
</html>

출력:

jQueryUI 라이브러리와 함께 animate() 메서드 사용

`jQuery-colors` 플러그인과 함께 `animate()` 메서드 사용

간단한 플러그인이 라이브러리에 의존하는 것보다 훨씬 더 최적입니다. 따라서 jQuery-colors 플러그인은 배경색에 애니메이션 효과를 주는 역할을 합니다.

여기서는 CDN을 사용하여 필요한 가져오기를 초기화합니다. 또한 색조 컬렉션의 범위가 제한되어 있습니다.

코드 조각:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color Animation Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js" integrity="sha512-VjRpiWhUqdNa9bwBV7LnlG8CwsCVPenFyOQTSRTOGHw/tjtME96zthh0Vv9Itf3i8w4CkUrdYaS6+dAt1m1YXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="my" style="height:100px;width:100px"></div>
<button id="btn">colors</button>
<script>
$( "#btn" ).click(function() {
  $( ".my" ).animate({backgroundColor: "green"});
});
</script>
</body>
</html>