jQuery: 요소의 배경색 변경
이 기사에서는 jQuery를 사용하여 마우스 오버 시 요소의 배경색을 변경하는 방법을 설명합니다. queue() 및 hide()라는 두 개의 jQuery API를 사용하여 이를 달성할 것입니다.
jQuery queue() API를 사용하여 배경색 변경
이 첫 번째 예제는 애니메이션 전후의 배경색을 변경합니다. 여기에서 css() API만으로는 의도한 대로 작동하지 않기 때문에 queue() API가 필요합니다.
첨부된 요소에 즉각적인 영향을 미치기 때문입니다. queue() API를 사용하여 css() API 결과 이후에 효과를 발생시키는 함수를 전달할 수 있습니다.
이것은 css()의 초기 색상이 애니메이션 시작 시 영향을 미친다는 것을 의미합니다. 이후 queue() API를 사용하여 초기 색상을 다른 색상으로 변경할 수 있습니다.
다음은 프로세스의 의사 코드입니다.
- 버튼 위로 마우스를 가져가면
css()API에서 초기 색상이 활성화됩니다. - 요소가 사라집니다.
- 요소가 다시 표시됩니다.
- 마지막으로 색상이
queue()API에 정의된 다른 색상으로 변경됩니다.
다음 코드는 의사 코드의 구현입니다. 다음은 웹 브라우저의 결과입니다.
결과적으로 버튼 위로 마우스를 두 번 가져갔을 때 애니메이션이 발생하지 않는 것을 확인할 수 있습니다. 다음 예에서 이에 대해 다루겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-change-background-color-with-queue-API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
button { align-self: center; padding: 1.2em; cursor: pointer; }
p { font-size: 5em; }
</style>
</head>
<body>
<main>
<p id="random_big_text">A big random text.</p>
<button>Move your mouse here.</button>
</main>
<script>
$(document).ready(function() {
$("button").mouseover(function() {
let random_big_text = $("#random_big_text");
random_big_text.css("background-color", "#ffff00");
random_big_text.hide(1500).show(1500);
random_big_text.queue(function() {
random_big_text.css("background-color", "#ff0000");
});
});
});
</script>
</body>
</html>
출력:
jQuery hide() API를 사용하여 배경색 변경
jQuery hide() API를 사용하여 queue() API를 사용한 첫 번째 예제에서 배경색 빌드를 변경합니다. 결과는 두 가지 차이점을 제외하고 동일합니다. 우리는 API 체이닝을 사용하며 그 효과는 매번 작동합니다.
결과적으로 각 애니메이션이 끝날 때 버튼 위로 마우스를 가져가면 프로세스가 다시 시작됩니다. 다음 코드는 수행 방법을 보여줍니다. 다음은 웹 브라우저의 결과입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-change-background-color-with-hide-API</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
main { border: 3px solid #1a1a1a; padding: 1.2em; display: grid; }
button { align-self: center; padding: 1.2em; cursor: pointer; }
p { font-size: 5em; }
</style>
</head>
<body>
<main>
<p id="random_big_text">A big random text.</p>
<button>Move your mouse here.</button>
</main>
<script>
$(function(){
$("button").mouseover(function(){
let random_big_text = $("#random_big_text");
random_big_text.stop()
.css("background-color","#ffff00")
.hide(1500, function() {
random_big_text.css("background-color","#ff0000")
.show(1500);
});
});
});
</script>
</body>
</html>
출력:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn