๋ชฉ์ฐจ
jquery animate ์ฌ์ฉ์
.animate() ํจ์๋ฅผ ์ด์ฉํ๋ฉด html Element ์์ ๊ฐ์ฒด ์์ง์์ ๋ถ์ฌํ ์ ์๋ค.
๋ฐ๋์ CSS ์์ฑ ๋งต ๋ฐ์ดํฐ์ ํจ๊ป ์ฌ์ฉํ๋ค.
์์ง์์ ๊ด๋ จ๋ ์์ฑ๋ค์ ๋จ์ ์์น ๊ฐ(single numeric value)์ ์ด์ฉํ๋ค.
์ฆ, width, height, left, margin ๋ฑ์ ์ด์ฉํ ์ ์์ง๋ง color๊ฐ์ ๊ฐ์๋ ์ฌ์ฉํ ์ ์๋ค.
.animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery
Duration์ ์ง์์๊ฐ์ด๋ฉฐ, complete์๋ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ง์ ํด์, ์ ๋๋ฉ์ด์ ๋์ ์ดํ ํจ์๋ฅผ ์คํํ ์ ์๋ค.
๋จ, ์ด ํจ์์๋ ์ธ์๊ฐ์ ๋๊ฒจ ์ค ์๋ ์๋ค.
- .animate( properties [, duration] [, easing] [, complete] )
- properties ์์ง์์ ๋ง๋ค์ด ๋ผ์ ์๋ CSS ์์ฑ๋ค
- duration ์์ง์์ด ๋ฐ์ํ ์๊ฐ
- easing ์์ง์์ ๋ณํ๋ฅผ ์ค ์ ์๋ ํจ์
- complete ์์ง์์ด ๋ฉ์ถ ํ ์คํ๋ ํจ์
- .animate( properties, options )
- properties ์์ง์์ ๋ง๋ค์ด ๋ผ์ ์๋ CSS ์์ฑ๋ค
- options A map of additional options to pass to the method. Supported keys:
- duration: ์์ง์์ด ๋ฐ์ํ ์๊ฐ
- easing: ์์ง์์ ๋ณํ๋ฅผ ์ค ์ ์๋ ํจ์
- complete: ์์ง์์ด ๋ฉ์ถ ํ ์คํ๋ ํจ์
- step: ์์ง์ ๊ฐ ์คํ ๋ณ๋ก ์คํ๋ ํจ์
- queue: ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ ์์๋๋ก ๋ฐ์ํฉ๋๋ค. ๋ง์ฝ false๋ก ํ๋ฉด ๋์์ ๊ฐ์ด ์์ง์์ด ์ผ์ด๋ฉ๋๋ค.
- specialEasing: CSS ์์ฑ์ ํ๋ ์ด์์ ํน๋ณํ ํจ๊ณผ๋ก ์ฒ๋ฆฌํฉ๋๋ค. (added 1.4).
์ข์ธก ๋ฉ๋ด๊ฐ ์์ํ ๋ซํ๊ฒ ํ๋ ์ ์ด์ฟผ๋ฆฌ๋ค.
๊ธฐ๋ณธ ์ ์ผ๋ก ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ด๋ค.
$(document).ready(function(){
// LNB ๋ฉ๋ด ์ ๋ ๊ธฐ๋ฅ
$('#menu_menuFix').click(function(){
var menuInitC = $('#menuInit').attr("value");
var timeToAnimate = 100;
if(menuInitC==0) {
$('.lnb').animate({width:"240px"},timeToAnimate);
$('#menuInit').val('1');
} //if menu collapse then lanb width is 240px;
else if (menuInitC==1) {
$('.lnb').animate({width:"70px"},timeToAnimate);
$('#menuInit').val('0');
} //if menu collapse then lanb width is 70px;
});
});
๋๊ธ