آموزش jquery : فصل سوم : افکتهای jquery

فصل سوم :

jQuery Effects :

افکت ها توابعی هستند که بر روی نمایش عناصر صفحه عملیاتی انجام میدهند .

افکت های موجود : Hide, Show, Toggle, Slide, Fade , Animate

Hide & Show :

توسط دو تابع hide() و show() میتوانید عناصر صفحه را پنهان یا آشکار نمایید :

$(“#btnhide”).click(function(){
$(“p”).hide();
});
$(“#btnshow”).click(function(){
$(“p”).show();
});

در کد فوق هنگامی که روی عنصری در صفحه با آیدی btnhide کلیک شود پاراگرافهای درون صفحه (تگهای p ) پنهای میشوند و با کلیک روی عنصر با آیدی btnshow کلیک شود پاراگرافها نمایش میبابند .

این دو تابع دو پارامتر speed و callback نیز می پذیرند :

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

پارامتر speed میتوانید مقدارهای ‘slow’ , ‘fast’ , ‘normal’ و همچنین مقداری به میلی ثانیه بپذیرد .

پارامتر callback تابعی است که هنگامی که عمل show یا hide به طور کامل انجام شد صدا زده میشود .

$(“button”).click(function(){
$(“p”).hide(1000);
});

در مثال فوق با کلیک روی button پاراگراف p ظرف مدت 1000 میلی ثانیه پنهان میشود .

$(“button”).click(function(){
$(“p”).hide(‘slow’,function(){ alert(‘hide is finished’); } );
});

در مثال فوق با کلیک روی button پاراگرافهای p بصورت آهسته پنهان میشوند و پس از پنهان شدن پیغام ‘hide is finished’ بر روی صفحه نمایش می یابد .

 

Toggle :

این افکت وضعیت عنصر مربوطه را از hide به show و بلعکس تبدیل میکند . یعنی اگر عنصر پنهان باشد با اجرای این افکت عنصر پیدا میشود و اگر پیدا باشد پنهان میشود .

$(“#line”).click(function(){
$(“#lineinfo”).toggle();
});

در کد فوق با کلیک روی عنصری با آیدی line مشخصات آن عنصر که در عنصر دیگری با آیدی lineinfo قرار دارد نمایش می یابد و با کلیک مجدد پنهان میشود .

این افکت هم همانند دو افکت قبلی دارای دو پارامتر speed و Callback می باشد .

 

Slide :

$(selector).slideDown(speed,callback)

این دستور selector را با سرعت speed به سمت پایین باز میکند .

$(selector).slideUp(speed,callback)

این دستور selector را با سرعت speed به سمت بالا جمع میکند (hide )

$(selector).slideToggle(speed,callback)

این دستور نیز selector را بین دو وضعیت باز و بسته تعویض مینماید .

پارامتر های این توابع هم مانند افکت های قبلی تنظیم میشوند .

 

Fade :

این افکت ها نیز برای نمایش و پنهان کردن عنصر استفاده میشود با این تفاوت که نوع پنهان کردن و نمایش دادن عناصر در این دستوران متفاوت است و با تغییر شفافیت )opacity ) انجام میشود.

$(selector).fadeIn(speed,callback)

این تابع عنصر selector را در صفحه نمایان میکند .

$(selector).fadeOut(speed,callback)

این تابع عنصر selector را در صفحه مخفی میکند .

$(selector).fadeTo(speed,opacity,callback)

این تابع پارامتری به عنوان opacity میپذیرد که میزان شفافیت را بین دو عدد 0 و 1 تعیین میکند که عدد 1 یعنی کاملا آشکار و عدد 0 یعنی پنهان و عنصر را بع اندازه عدد شفافیت ، شفاف میکند .

مثلا :

$(“button”).click(function(){

$(“div”).fadeTo(“slow”,0.25);

});

در کد فوق با کلیک روی button عنصر div درون صفحه به آرامی شفاف میشود تا به 25 درصد شفافیت برسد .

 

Custom Animation :

$(selector).animate({params},[duration],[easing],[callback])

پارامتر params پارامترهایی را میپذیرد که قرار است همزمان با هم بر روی selector اعمال شوند .

مثلا :

animate({width:”70%”,opacity:0.4,marginLeft:”0.6in”,fontSize:”3em”});

تمام پارامتر ها درون {} نوشته میشوند و با کاما ‘,’ از هم جدا میشوند . هر پارامتر با عنوان و سپس “:” و بعد مقدار آن مشخص میشود .

پارامتر duration مانند پارامتر speed در افکت های قبلی عملی میکند که میتواند مقادیر ‘slow’ , ‘fast’ , normal و یا عددی به میلی ثانیه را در بر بگیرد .

<script type=”text/javascript”>
$(document).ready(function(){
$(“#start”).click(function(){
$(“#box”).animate({left:”100px”},”slow”);
$(“#box”).animate({fontSize:”3em”},”slow”);
});
});
</script>

در قطعه کد فوق وقتی روی عنصر با آیدی start کلیک میشود عنصر #box در صفحه اول 100 پیکسل به سمت چپ رفته و سپس نوشته های داخلش به اندازه 3em خواهد شد .

میتوان خطهای 4 و 5 را در یک خط نوشت :

$(“#box”).animate({left:”100px”, fontSize:”3em”},”slow”);

که البته در این حالت هر دو مقدار همزمان با هم به #box اعمال خواهد شد.

نکته : تابع stop() هم برای متوقف کردن افکت در حال اجرا استفاده میشود :

$(selector).stop();

 

 

نکته مهم : میتوان توابع را بجای نوشتن در خطهای جداگانه ، پشت سر هم به یک عنصر اعمال کرد مثلا :

$(‘#box’).fadeIn(1000);

$(‘#box’).animate({left:”100px”},’slow’);

$(‘#box’).fadeOut(1000);

بجای کدهای فوق که همه بر روی یک عنصر اعمال میشوند میتوان نوشت :

$(‘#box’).fadeIn(1000).animate({left:”100px”},’slow’).fadeOut(1000);

 

سوال : چرا تابع Callback باید استفاده شود ؟

گاهی اوقات ما نیاز داریم عملی را دقیقا بعد از اعمال کامل یک افکت اجرا کنیم .

به مثال زیر توجه نمایید :

$(“button”).click(function(){
$(“p”).hide(1000);
alert(“The paragraph is now hidden”);
});

در این مثال ما میخواهید هنگامی که پاراگراف به طور کامل پنهان شد عبارت “the paragraph is now hidden ” نمایش یابد . اما در عمل این اتفاق نمی افتد زیرا در حین انجام عمل hide خط بعدی فرمان صدا زده خواهد شد و این امر باعث تداخل خواهد شد .

اما به این مثال دقت نمایید :

$(“button”).click(function(){
$(“p”).hide(1000,my_alert);
});

function my_alert()
{
alert(“The paragraph is now hidden”);
}

در این مثال از تابع my_alert به عنوان تابع Callback استفاده شده . در این حالت دقیقا بعد از اتمام افکت hide تابع my_alert صدا زده میشود .

مثال : در مثال زیر قصد داریم تعدادی لینک در صفحه قرار دهیم که با رفتن موس روی آنها توضیح مختصر با افکت مناسب نمایش یابد :

<html>

<head>

<script type=”text/javascript“ src=”jquery.js“></script>

<script type=”text/javascript“>

$(document).ready(function(){

$(‘a’).mouseover(function(){

$(this).next(‘div.info’).slideDown(‘slow’);

})

$(‘a’).mouseout(function(){

$(this).next(‘div.info’).slideUp(‘slow’);

});

});

</script>

<style>

ul {

list-style:none;

margin:0;

padding:0;

}

ul li {

padding:3px;

background:#EEE;

border:1px solid #000000;

width:200px;

margin:2px;

}

.info {

padding:5px;

background:#FFF;

color:#000;

display:none;

}

</style>

</head>

<body>

<ul>

<li>

<a href=”https://blog.monavarian.ir“ > Blog.Monavarian.ir </a>

<div class=”info“>mohsen monavarian Weblog</div>

</li>

<li>

<a href=”http://share.wanted.ir“ >wanted.ir </a>

<div class=”info“>The First shared TextBoxes in Iran</div>

</li>

<li>

<a href=”http://www.res2ran.com“ >Res2Ran.com </a>

<div class=”info“>Shiraz restuarants And FastFoods Guide , Food instructions</div>

</li>

</ul>

</body>

</html>

همانطور که در کد بالا مشاهده میکنید در قسمت کد jquery دو تابع برای رویدادهای mouseover و mouseout تگهای a (لینکهای صفحه ) نوشته شده که تابع اولی باعث نمایش تگ div.info با افکت slideDown میشود و تابع دومی نیز با افکت slideUp تگ را مخفی می کند .

شما میتوانید به جای slideDown و slideUp از افکت های دیگری که در این فصل بیان شد استفاده نمایید .

نکته : تابع next :

$(selector1).next(selector2);

این تابع به دنبال عناصر انتخابی مطابق با selecotr2 میگردد که پس از عنصر selector1 در صفحه موجود باشد . مثلا در کد بالا دنبال اولین عنصر div با کلاس info بعد از عنصر جاری (که همان تگ a انتخاب شده است ) می گردد .