متحرک سازی بخشی از صفحه طراحی سایت شما به واسط کدهای جی کوئری jquery از آیتم های پرکاربرد در طراحی وب سایت شما می باشد. شخصی سازی تحرک به واسط متد animate() امکان پذیر می باشد که می توانید به اجزا صفحه سرعت مورد نظر خود را اعمال نمایید. متغییرهای "slow", "fast" و milliseconds مواردی است که در جهت تنظیم سرعت متحرک سازی بکار گرفته می شوند.
$("button").click(function(){
$("div").animate({left: '250px'});
});
متغییر left موقعیت و جهت تحرک را نمایش می دهد.
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
کد بالا نیز ابعاد بخش متحرک شده را در عرض و ارتفاع مشخص می نماید.می توانید به واسط کد شفافیت بخش متحر شده را نیز مشخص نمایید که بدین منظور از کد opacity استفاده می نمایید. کد زیر نمونه ای از استفاده این کد می باشد.
$("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");
});
در کد بالا سرعت حرکت را آهسته اعلام نموده است و همچنین شفافیت را نیز تعیین نموده است. کدهای متحرک سازی زیبایی را به صفحه طراحی سایت اهدا می نمایند که موجب جذب نظر کاربر می شود و در سئو سایت و بهینه سازی سایت موثر خواهد بود. زیبایی در صفحه طراحی سایت موجب تمایل کاربر به ماندن در طراحی وب سایت خواهد شد و نیز تمایل به بازرگشت دوباره به طراحی سایت شما را افزایش می دهد که تمامی مواردی است که مورد مطلوب صاحبان طراحی سایت قرار می گیرد و همچنین نتیجه خود را در سئو وب سایت و بهینه سازی وب سایت خواهد گذاشت.