متحرک سازی با jQuery

[elham1388]

افزودن قابلیت ها و ایفکت ها در قوی نمایش دادن طراحی سایت بسیار اثر گذار می باشد. با استفاده از کدهای jQuery می توان به صفحات سایت افکت های متحرک سازی را افزود و منجر به زیبا نشان دادن طراح وب سایت خود شد.در jQuery از پارامترها و خصیصه های CSS بهره می گیرد و به آسانی با افزودن این کدها، افکت هایی زیبا، با سرعت نمایش بالا را در طراحی سایت خود گنجاند و موجب جلب نظر کاربران وب سایت شد که این موارد تاثیر مثبت بر روی سئو سایت را به دنبال خواهد داشت. پارامتر سرعت مدت زمان افکت را مشخص می کند که می تواند مقدارهای "slow", "fast", or milliseconds را به خود اختصاص دهد.


در زیر مثالی ساده از استفاده از این افکت را نشان می دهد.


$("button").click(function(){
$("div").animate({left:'250px'});
});





توجه داشته باشید که چندین افکت می تواند به طور همزمان اجرا شوند. به مثال زیر دقت نمایید.


$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});








در مثال زیر متغییرهای طول و عرض در برای ایفکت مشخص نموده است.


$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});





شما همچنین می توانید مقدارهای show", "hide", or "toggle" را برای قطعه کد متحرک خود در نظر بگیرید.





$("button").click(function(){
$("div").animate({
height:'toggle'
});
});





JQueryبه طور پیش فرض برای تابع های متحرک شده بکار گرفته می شود. و سپس کدهای جای داده شده را خط به خط اجرا می نماید. به مثال زیر توجه نمایید.


$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});





منبع: متحرک سازی با jQuery (http://www.npco.net/demo/articles/312-%D9%85%D8%AA%D8%AD%D8%B1%DA%A9-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%A8%D8%A7-jquery.html)