jQuery๋ ์์์ ํ์/์จ๊น, ์ด๋, ํฌ๊ธฐ ๋ฐ๊ฒฝ ๋ฑ์ ๊ฐ๋จํ ๋ฉ์๋๋ก ์ฒ๋ฆฌํ ์ ์๋๋ก ์ง์ํ๋ค.
1. ํจ๊ณผ ๋ฐ ์ ๋๋ฉ์ด์ ๋ฉ์๋
1) ํจ๊ณผ ๋ฉ์๋
์์๋ฅผ ๋จ์ํ ๋ณด์ด๊ฑฐ๋ ์จ๊ธฐ๋ ๊ธฐ๋ฅ์ด๋ค.
โ show() / hide()
$("#box").hide();
$("#box").show();
์๊ฐ ์ง์ ๊ฐ๋ฅ
$("#box").hide(1000);
โก toggle()
๋ณด์ด๊ธฐ/์จ๊ธฐ๊ธฐ๋ฅผ ์ ํํ๋ค.
$("#box").toggle();
โข fade ํจ๊ณผ
| ๋ฉ์๋ | ์ค๋ช |
| fadeIn() | ์์ํ ๋ํ๋จ |
| fadeOut() | ์์ํ ์ฌ๋ผ์ง |
| fadeToggle() | ์ ํ |
| fadeTo() | ํฌ๋ช ๋ ์กฐ์ |
$("#menu").slideToggle(500);
2) ์ ๋๋ฉ์ด์ ๋ฉ์๋
โ animate()
CSS ์์ฑ์ ์ ์ง์ ์ผ๋ก ๋ณ๊ฒฝํ๋ค.
$("#box").animate({
width: "200px",
height: "200px",
opacity: 0.5
}, 1000);
ํ์
.animate(์์ฑ, ์๊ฐ, ๊ฐ์๋, ์ฝ๋ฐฑ ํจ์)
โก ๊ฐ์๋ ์ต์
- "linear"
- "swing" (๊ธฐ๋ณธ)
โข ์ฝ๋ฐฑ ํจ์
์ ๋๋ฉ์ด์ ์ข ๋ฃ ํ ์คํ๋๋ค.
$("#box").animate({left: "200px"}, 1000, function() {
alert("์๋ฃ");
});
2. ์ ๋๋ฉ์ด์ ํจ๊ณผ ์ ์ด ๋ฉ์๋
1) ์ ๋๋ฉ์ด์ ํจ๊ณผ ์ ์ด ๋ฉ์๋๋?
์คํ ์ค์ธ ์ ๋๋ฉ์ด์ ์ ์ ์ดํ๋ ๊ธฐ๋ฅ์ด๋ค.
โ stop()
ํ์ฌ ์คํ ์ค์ธ ์ ๋๋ฉ์ด์ ์ ์ค์งํ๋ค.
$("#box").stop();
์ต์
.stop(์ ๋๋ฉ์ด์
ํ ์ญ์ , ํ์ฌ ์ ๋๋ฉ์ด์
์๋ฃ ์ฌ๋ถ)
ex.
.stop(true, true);
- true → ๋๊ธฐ ์ค ์ ๋๋ฉ์ด์ ์ ๊ฑฐ
- true → ํ์ฌ ์ ๋๋ฉ์ด์ ์ฆ์ ์๋ฃ
โก delay()
์ ๋๋ฉ์ด์ ์ ์คํ์ ์ง์ฐํ๋ค.
$("#box").delay(500).fadeOut();
โข finish()
๋๊ธฐ ์ค์ธ ์ ๋๋ฉ์ด์ ์ ํฌํจํ์ฌ ์ฆ์ ์ข ๋ฃํ๋ค.
$("#box").finish();
โฃ clearQueue()
๋๊ธฐ์ด์ ์๋ ์ ๋๋ฉ์ด์ ์ ์ ๊ฑฐํ๋ค.
$("#box").clearQueue();'Front-End > JavaScript | jQuery | AJAX' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| 10. ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ๋ฌ๊ทธ์ธ (0) | 2026.02.17 |
|---|---|
| 09. ์ ์ด์ฟผ๋ฆฌ(jQuery) ๋น๋๊ธฐ ๋ฐฉ์ ์ฐ๋ (0) | 2026.02.17 |
| 07. ์ ์ด์ฟผ๋ฆฌ(jQuery) ์ด๋ฒคํธ (0) | 2026.02.17 |
| 06. ์ ์ด์ฟผ๋ฆฌ(jQuery) ๋ฌธ์ ๊ฐ์ฒด ์ ํ์์ ์กฐ์๋ฒ (0) | 2026.02.17 |
| 05. ํจ์(Function) (0) | 2026.02.16 |