사용자가 DOM에 새로운 그래픽 컨트롤을 추가 할 수있는 웹 페이지 (jquery 사용)를 개발 중입니다 (예 : 사용자가 링크를 클릭하고 새 DIV가 만들어 짐). 이 새로운 요소의 배경색을 몇 초 동안 어떻게 바꿀 수 있습니까? (그리고 원래의 색으로 되돌아 갈 것입니다.) 색상을 변경하여 사용자에게 새 요소의 위치에 대한 시각적 표시기를 제공하려고합니다.DOM에 추가 된 새 요소의 배경색을 일시적으로 변경하는 방법은 무엇입니까?
감사합니다.
jQuery, MooTools 및 Prototype과 같이 많은 효과가있는 그래픽 효과가 많은 라이브러리가 있습니다. 예를 들어 jQuery를 사용하여이 효과를 끄는 방법은 this StackOverflow question을 확인하십시오.
더 일반적으로 자바 스크립트의 setTimeout 메서드를 사용하여 요소의 색상을 잠시 동안 설정 한 다음 시간 초과가 실행되면 원래의 색상으로 다시 설정합니다.
플러그인을 사용하지 않고 이것을 수행하는 가장 간단한 해결책은 jquery UI의 'Highlight' feature을 사용하는 것입니다.
다음은 jQuery.animate()를 사용한 예입니다. 색상은 사용하지 않지만 불투명도는
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border: solid #000 1px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("div").click(function() {
$("<span>Hello there!</span>").appendTo(this)
.animate({
opacity: 0
}, 500, function() {
$(this).animate({
opacity: 1,
}, 500);
});
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>