آموزش JQuery – کار با animate

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

این تابع از لحاظ کارایی به نظیر است . مسلما تا به حال اسلاید بار ها ( Slide Bar ) را در سایت های خبری ، خصوصا سایت های خارجی مشاهده نموده اید و اگر علاقه مند شده باشید وقت ارزش مند خود را جهت تلاش برای ایجاد آن ها هدر داده اید (!) . امروز کار با این تابع را فرا خواهیم گرفت تا به قدرتمندی و سادگی کار JQuery پی ببریم . امروز شروع به برنامه نویسی خواهیم کرد. برنامه ای که با زیباییش مدت ها کاربران وب را به خود مشغول کرد .

تابع animate به صورت زیر است :

.animate ( properties , [duration] , [easing] , [complete] );

توجه : این نکته را همیشه به یاد داشته باشید که در آموزش های استاندارد ، در برنامه های معتبری مانند Dream Weaver , Rapid PHP و … هرگاه آرگومان های ( ورودی های ) تابعی دلخواه باشد ( یعنی وارد کردن یا خالی گذاشتن آن ها اشکالی در برنامه ایجاد نکند ) مقدار را در [] قرار می دهند. برای مثال ، در تابع animate() وارد نکردن مقادیر duration , easing و Complete تاثیری در اجرا یا عدم اجرای تابع ندارد اما در نحوه اجرای آن موثر است . حال به تدریج با همه آرگومان های تابع فوق آشنا خواهیم شد .

تابع animate() می تواند به دو صورت آرگومان ( ورودی ) بپذیرد . گونه اول مانند نمونه یاد شده بود و گونه دوم که ما با آن کار خواهیم کرد به صورت زیر است :

.animate( properties , options );

properties : نشانه عنصری در صفحه ، که می خواهیم آن را به حرکت در آوریم.
option : این قسمت شامل چندین و چند متد ، یا به معنای دیگر به چندین ورودی تقسیم می شود که ما امروز فقط به صورت ساده تا متوسط با آن ها کار خواهیم کرد .

ویژگی animate به شما اجازه می دهد تا روی هر تعداد از عناصر که تمایل داشتید افکت های حرکتی ایجاد کنید . به واقع تنها نیاز دارید تا نشانه ای از عنصر مورد نیاز را به آن بدهید ( مانند id ) .
البته هر ویژگی که به یک animate وارد می کنید باید قابل شمارش باشد . اما خاصیت ها غیر قابل شمارش ، قابل تغییر با این تابع نیستند . برای مثال ، می توانید width ، height ، left ، top یا همان طول ، عرض ، فاصله از چپ ، فاصله از راست یا … را می توان با این ویژگی تغییر داد اما ویژگی background-color یا همان پشت زمینه یک عنصر را نیم توان با animate ویرایش کرد . ( البته آن تغییر نیز خود توابع مخصوص خود را دارد که به تدریج با همه آن ها آشنا خواهیم شد ).

به طور کلی مقادیری که واحد آن ها می توان دپیکسل ( px ) یا em یا % ( درصد ) باشد می تواند با این تابع تغییر کند . البته که مقادیری مانند scrollTop یا scrollLeft نیز توس این تابع قابل تغییر هستند . توجه کنید که مقدار margin و border غیر قابل تغییر هستند . هر چند که مقادیر آن ها با px ( پیکسل ) مشخص می شوند .

برای تغییر آن ها شیوه ای وجود دارد به صورت زیر :

$(element).css(‘marginTop’)

که ما امروز نیازی به آن ها نداریم و در صورت نیاز در آموزش های بعدی با آن ها کار خوهیم کرد.

توجه کنید که ویژگی هایی که مقادیر رشته ای نیز می پذیرند ( مانند toggle , hide , show و … ) نیز می توانند با این تابع دچار تغییر شوند . این ها را با همدیگر تدریجا کار خواهیم کرد.

اگر برنامه نویس باشید حتما با =- یا =+ و کارایی آن ها آشنا هستید . تابع animate می تواند بدین صورت نیز مقادیر را تغییر دهد . برای عزیزانی که با عبارات =+ و =- آشنا نیستند می توانم توضیح مختصری در این رابطه دهم که فرض کنید مقدار متغیر مثلا f برای 50 است . وقتی مقدار f را =+ 50 می کنید ، مقدار f + 50 می شود . یعنی مقدار f به 100 تغییر می کند :

var f = 50 ;
f += 50 ;
alert(f);

نتیجه : نمایش پیغام 100

=====================================

var f = 50 ;
f -= 50 ;
alert(f);

نتیجه : نمایش پیغام 0

JQuery به شما این امکان را می دهد تا بتوانید مدت زمانی را که طول می کشد تا تابع animate اجرا شود معین کنید . مثلا اگر می خواهید طول یه عنصر را که 100 پیکسل است به 20 پیکسل تبدیل کنید و مقدار مدت زمان ( duration ) را روی 500 تنظیم کنید ، تابع animate نیم ثانیه طول می کشد تا طول عنصر را کاهش دهد . اگر آن را روی 10000 بگذارید کوتاه شدن عنصر 10 ثانیه طول می کشد . در واقع مقدار duration بر میلی / ثانیه تنظیم شده است . توجه کنید که مقادیر fast و slow مقادیری بین 200 میلی ثانیه و 600 میلی ثانیه هستند .

برای اولین مثال ، با مثال ساده زیر شروع می کنیم :

<div id=”clickme”>
Click here
</div>
<img id=”book” src=”book.png” alt=”” width=”100″ height=”123″
style=”position: relative; left: 10px;” />

در این صفحه یک DIV با نشانه ( id ) مشخص شده داریم که مقدار آن clickme است .
یک عکس داریم که id ان برای book است و البته در استایل آن فاصله از چپ ( left ) روی 10 پیکسل و مقدار position را relative تنظیم کرده ایم . برای عناصری که نیاز به تغییر با تابع animate دارند مقدار position آن ها یا باید relative باشد یا absolute . اگر به CSS وارد باشید متوجه تفاوت این دو می شوید . متاسفانه توضیح آن به علت گستردگی در آموزش امروز ما نخواهد گنجید .

$(‘#clickme’).click(function() {
$(‘#book’).animate({
opacity: 0.25,
left: ‘+=50’,
height: ‘toggle’
}, 5000, function() {
// Animation complete.
});
});

این کد JQuery ما است . در آن تعیین کرده ایم که اگر روی #clickme ( یعنی عنصر با مشخصه “id=”clickme ) کلیک شود یک تابع جدید اجرا شود. توجه کنید ، وقتی می خواهید با اجرای یک event یا همان رویداد در صفحه یک تابع دیگر اجرا شود می توانید با تبعیت از قوانین JQuery ، مانند کد بالا که در تابع click یک تابع دیگر معرفی شده است عمل کنید .
بعد از اینکه روی clickme کلیک شد کار با animate آغاز می شود . عنصر با مشخصه “id=”book که همان عکس ما است مقدار opacity آن 0.25 می شود . فاصله آن از چپ 50 پیکسل بیشتر می شود و ارتفاع آن toggle می شود  ( toggle به گونه ای عمل می کند مانند باز و بسته کردن یک پنجره ، اگر کد را امتحان کنید متوجه عرایض بنده خواهید شد ) . این عمل در مدت زمان 5000 میلی ثانیه ، یعنی 5 ثانیه انجام می شود. توجه کنید که ویژگی هایی که قرار است با تابع animate تغییر کنند با , جدا شده اند. ( نوشتن هرکدام از آن ها در خطی جدید ضروری نیست ).

توجه : toggle سبب می شود تا اگر height عکس مثلا 100 باشد با کلیک روی عنصر مشخص شده ( که با آن animate آغاز می شود ( در اینجا یعنی Clickme )) مقدار height  صفر می شود و با کلیک دوباره ، باز مقدار height به 100 باز می گردد.

در کد بالا کمی تامل نمایید . با هر کلیک ، باید عکس 50 پیکسل بیشتر از حالت قبل از کنار صفحه فاصله می گیرد . ارتفاعش با هر کلیک مرتبا تغییر می کند . اما مقدار opacity با همان کلیک اول 0.25 شده و دیگر کم یا زیاد نمی شود. حال مقدار opacity را به جای 0.25 روی ‘toggle’ قرار دهید . با این کار هربار روی Clickme کلیک کنید ، عکس غیب و ظاهر می شود.

حال برای امتحان کردن درس امروز کد زیر را در یک صفحه html ذخیره کنید :

<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<button id=”left”>&laquo;</button> <button id=”right”>&raquo;</button>
<div class=”block”></div>
<script>
$(“#right”).click(function(){
$(“.block”).animate({“left”: “+=50px”}, “slow”);
});

$(“#left”).click(function(){
$(“.block”).animate({“left”: “-=50px”}, “slow”);
});

</script>

</body>
</html>

در این تمرین ، شما دو کلید راست و چپ دارید که با کلید بر روی آن ها یک مربع که در واقع یک div است ، تغییر موقعیت می دهد به اندازه 50 پیکسل . مقدار slow در واقع همان 600 میلی ثانیه است . می توانید آن را تغییر دهید .

توجه : مقدار opacity را در مثال های قبل می توانید روی “show” یا “hide” نیز تنظیم کنید .یعنی نمایش مطلق یا عدم نمایش مطلق ( نه به صورت سایه روشن ) .

برای مثال آخر ، به کد یزیر دقت نمایید :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script language=”javascript” type=”text/javascript” src=”../jquery-1.6.js”></script>
</head>

<body>
<div style=”width: 200px ; height: 100px ; overflow: hidden” >
<div style=”position: relative ; height: 100px ;left: 0px ; width: 1200px ; background-color: #003366″>
<img src=”img_01.png” width=”200″ height=”100″ border=”0″ /><img src=”img_02.png” width=”200″ height=”100″ border=”0″ /><img src=”img_03.png” width=”200″ height=”100″ border=”0″ /><img src=”img_04.png” width=”200″ height=”100″ border=”0″ /><img src=”img_05.png” width=”200″ height=”100″ border=”0″ /><img src=”img_06.png” width=”200″ height=”100″ border=”0″ />
</div>
</div>
<div style=”width: 200px ; height: 100px ” align=”center” >
<span id=”right”> RIGHT </span>
&nbsp; &nbsp;
<span id=”left”> LEFT </span>
</div>
<script language=”javascript” type=”text/javascript”>
var number = 1000 ;
$(“#right”).click(function(){

if ( number == 1000 )
{}
else
{
$(“.slide”).animate({“left” : “+=200px”} , “slow”);
number += 200 ;
}

});

$(“#left”).click(function(){

if ( number == 0 )
{ }
else
{
$(“.slide”).animate({“left” : “-=200px”} , “slow”);
number -= 200 ;
}

});

</script>
</body>
</html>

در کد فوق ابتدا مقدار src ارجاع دهنده به فایل jquery را تنظیم نمایید.
به کد دقت کنید. عناصر صفحه ما دو span هستند با id های right و left .

یک div داریم که نقش قاب برای عکس ها ایفا می کند . طول آن 200 پیکسل است و طول هر عکس نیز 200 پیکسل . کلیک بر روی right و left باعث حرکت div حاوی عکس ها می شود . برای مفهوم بهتر فایل زیر را که حاوی JQuery 6 نیز است را دریافت نمایید و آن را آزمایش کنید :

برای دریافت کد آزمایشی کار با تابع animate در JQuery به همراه ورژن 1.6 jQuery اینجا کلیک نمایید

نتیجه کلی :

امروز با تابع animate() به صورت ساده و مختصر آشنا شدیم و کاربرد آن را مشاهده کردیم . توجه فرمایید که با تابع animate می توانید اسلایدر های بسیار زیبا ایجاد نمایید اما ، JQuery خود تابعی با عنوان slider دارد که به زودی با آن آشنا خواهیم شد.

از نمونه های تابع animate را در سایت mci.ir مشاهده نمایید . وقتی روی آمار سایت قرار می گیرید div که شامل آمار سایت است از سمت چپ به مقدار 100 پیکسل وارد صفحه می شود و با دور کردن نشانگر ( موس – mouse ) از روی آمار سایت ، عبارت به حالت قبلی خود باز می گردد. این یکی از نمونه های زیبای animate است که البته طراحان سایت mci این کار را جدا از JQuery در نزدیک به 200 خط نوشته اند و ما آن را تنها در 10 خط ایجاد کردیم . ( 10 خط آموزشی ) . توجه کنید که تمرین و به واقع بازی با JQuery نیازمند ذهنی خلاق دارد . پس به سایت های مختلفی سر بزنید و تلاش کنید تا نمونه هایی مانند آن ها بسازید .