jQuery(jQuery.fx 객체)_2024-07-29
jQuery.fx 객체
제이쿼리의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있습니다.
1. jQeury.fx.speeds
2. jQeury.fx.interval
3. jQeury.fx.off
jQuery.fx.speeds 프로퍼티
jQuery.fx 객체의 speeds 프로퍼티는 "slow", "normal", "fast" 값을 가지고 이펙트 효과의 속도를 나타냅니다.
제이쿼리에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같습니다.
프로퍼티 값밀리초(milisecond)
| fast | 200 |
| normal | 400 |
| slow | 600 |
이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경할 수도 있습니다.
예제
$(function() {
$("#toggleBtn").on("click", function() {
// id가 "divBox"인 요소를 빠르게(0.2초에 걸쳐) 올라가면서 사라지거나 내려오면서 나타나게 함.
$("#divBox").slideToggle("fast");
});
$("#setBtn").on("click", function() {
// jQuery.fx 객체의 speeds 프로퍼티의 fast의 기본값을 1초로 변경함.
jQuery.fx.speeds.fast = 1000;
});
});jQuery.fx.interval 프로퍼티
jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타냅니다.
연속적인 프레임에서의 초당 프레임 수는 13으로 기본 설정되어 있습니다.
이러한 초당 프레임 수를 interval 프로퍼티를 이용하여 사용 목적에 맞게 변경할 수 있습니다.
jQuery.fx.off 프로퍼티
jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용할 수 없게 됩니다.
이렇게 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경됩니다.
off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용될 수 있습니다.
예제
$(function() {
$("#toggleBtn").on("click", function() {
// id가 "divBox"인 요소를 1초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
$("#divBox").slideToggle(1000);
});
$("#forbidBtn").on("click", function() {
// jQuery.fx 객체의 off 프로퍼티를 true로 설정함.
jQuery.fx.off = true;
});
});jQuery.fx 객체 프로퍼티
| jQeury.fx.speeds | 밀리초에 해당하는 "slow", "fast" 등의 값을 가지고 이펙트 효과의 속도를 나타냄. |
| jQeury.fx.interval | 이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타냄. |
| jQeury.fx.off | 모든 이펙트 효과를 사용할 수 없도록 비활성화시킴. |
https://www.tcpschool.com/jquery/jq_effect_jqueryfx
말풍선2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="styles7.css" />
<script src="scripts1.js"></script>
</head>
<body>
<div class="frame-uiBoard"><div class="frame-uiBoard-inner"><div class="frame-uiBoard-inner2">
<!-- 데모 시작 -->
<ul class="rolloverExample">
<li><a class="rollover" href="http://example.com"><img src="custommer/home_off.png" alt="Home" /></a></li>
<li><a class="rollover" href="http://example.com"><img src="custommer/store_off.png" alt="Store" /></a></li>
<li><a class="rollover" href="http://example.com"><img src="custommer/FAQ_off.png" alt="FAQ" /></a></li>
<li><a class="rollover" href="http://example.com"><img src="custommer/setting_off.png" alt="Setting" /></a></li>
</ul>
<!-- 데모 끝 -->
</div></div></div>
</body>
</html>
scripts1.js
$(document).ready(function(){
// 각 ".rollver" 클래스를 가지 요소에 대해 반복
$(".rollover").each(function(){
let a = $(this); //현재 요소를 변수 a에 저장
let img = a.find("img"); //현재 요소 내의 이미지를 찾음
let src_off = img.attr("src"); //기본 이미지 경로를 저장
//"_off"를 "_on"으로 변경하여 호버시 이미지 경로를 생성
let src_on = src_off.replace("_off","_on");
// src_off = "custommer/"+ src_off; //기본 이미지 경로 수정
// src_on = "custommer/"+ src_on; //기본 이미지 경로 수정
// 새로운 이미지 객체를 생성(미사용)
$("<custommer/>").attr("src",src_on);
//마우스 오버 및 마우스 아웃 이벤트 처리
a.hover(function(){
// 마우스 오버 시 이미지 경로를 src_on
img.attr("src",src_on);
},function(){
img.attr("src",src_off);
});
});
});
styles7.css
.rolloverExample {
width:380px;
height:93px;
padding:0;
margin:0 auto;
list-style-type:none;
}
.rolloverExample * {
float:left;
}
.rolloverExample li {
padding:0 0 0 20px;
margin:0;
}