دوره H جی کوئری: درس 7: افکت ها

دوره H جی کوئری
درس 7 (آخر): افکت ها در جی کوئری

بالاخره به آخرین درس از دوره H آموزش جی کوئری رسیدیم؛ در این بخش به نحوه‌ی کار با افکت‌ها در جی کوئری می‌پردازیم.

Hide/Show, Fade, Slide

جی کوئری، روش‌های ساده ای را برای پیاده سازی افکت‌ها جهت ایجاد انیمیشن در اختیار ما قرار داده است.

متد Hide ، Show و Toggle

از دو متد Show و Hide، برای نمایش و مخفی کردن المنت‌های انتخاب شده، استفاده می‌کنیم و از متد Toggle برای سوئیچ بین این دو حالت؛ به این معنا که اگر مخفی بود نمایش داده شود و اگر مخفی نبود، مخفی شود.

$(function() {
    $("p").click(function() {
        $("div").toggle();
    });
});

هر سه متد، می‌توانند یک ورودی دلخواه داشته باشند و آن سرعت انجام انیمیشن (کار) است.این سرعت براساس میلی ثانیه خواهد بود.
در مثال زیر، ما سرعت را 1000 میلی ثانیه (1 ثانیه) قراره داده‌ایم:

$(function() {
    $("p").click(function() {
        $("div").toggle(1000);
    });
});

متد fadeIn ، fadeOut و fadeToggle

همانند متدهای hide و show ، جی کوئری متدهای fadeIn و fadeOut را نیز برایمان مهیا کرده است که یکی به تدریج محو شده و دیگری به تدریج ظاهر می‌شود ولی در متدهای قبلی، مخفی شدن و ظاهر شدن به صورت درجا اتفاق می‌افتد.
همانند قبل در این‌جا نیز fadeToggle برایمان مهیا شده است.
ورودی‌ها نیز همانند ورودی‌های متدهای قبلی می‌باشند.

$(function() {
    $("p").click(function() {
        $("div").fadeToggle(1000);
    });
});

متد slideUp ، slideDown و slideToggle

از این متدها نیز برای ایجاد عمل sliding استفاده می‌شود؛ منظور از sliding ، باز و بسته شدن کشویی یک عنصری می‌باشد.
این متدها نیز همانند دو مورد قبل استفاده می‌شوند و ورودیشان نیز همانند آنان است.

$(function() {
    $("p").click(function() {
        $("div").slideToggle(500);
    });
});

()animate

متد animate ، به ما این اجازه را می‌دهد تا یک مقداری از ویژگی‌های CSS را متحرک سازی کنیم. این مقداردهی CSS براساس فرمت جیسون (JSON) می‌باشد.
بنابراین ورودی اول این متد، ویژگی‌های CSS را در ساختار جیسون دریافت کرده و ورودی دوم نیز همانند متدهای قبل، سرعت را براساس میلی ثانیه تعیین می‌کند. در مثال زیر، عرض المنت‌های انتخاب شده، در طول یک ثانیه به 250 پیکسل تغییر می‌یابند.
این متد همانند متدهایی که در بالا معرفی شد، دو ورودی زمان و callback را نیز دارد؛ زمان در ورودی دوم و callback نیز در ورودی سوم استفاده می‌شود. در واقع متدهای قبلی نیز از این متد استفاده می کنند.

$("div").click(function() {
    $("div").animate({width: '250px'}, 1000);
});

انیمیت چند ویژگی باهم

اگر با جیسون آشنا باشید، می‌دانید که با کاما می‌توانیم ویژگی‌ها را از هم جدا کنیم؛ از این رو، برای انیمیت چند ویژگی باهم، از کاما برای جدا کردن ویژگی‌ها استفاده می‌کنیم.

$("div").animate({
    width: '250px',
    height: '250px'
}, 1000);

البته تعجب نکنید، من خودم فقط آن‌ها را به خطوط جدید انتقال داده‌ام و فرقی نداد چرا که صرفا برای تمیزترشدن کد است.

همچنین ما می‌توانیم مقدارهارا به نستبی کم و زیاد کنیم، ابتدا مثال زیر را در نظر بگیرید:

$("div").animate({
    width: '+=250px',
    height: '+=250px'
}, 1000);

در این‌جا، طول و عرض 250 تا زیاد خواهند شد؛ این یعتی مقدارشان 250 پیکسل نمی‌شود بلکه 250 پیکسل به مقدار فعلیشان اضافه می‌شود.
می‌توانیم با غلامت منها نیز آن را کم کنیم.

صف انیمیت

فرض کنید شما چندین بار پشت سر هم متد animate رای المنت(های) انتخاب شده فراخوانی می‌کنید؛ در این حالت، جی کوئری به صورت داخلی، برای این فراخوانی ها یک صف تولید کرده و به ترتیب و یکی پس از دیگری آن‌ها را اجرا می‌کنید.
برای مثال:

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

ایجاد یک Drop-Down Menu

بیایید بعد از این همه درسی که یاد گرفتیم، یک پروژه بسیار ساده‌ای را در کنار هم انجام دهیم.
فرض کنید که یک سایتی دارید و سایت شما دارای منوهایی در هدر خود می‌باشد؛ با کلیک روی منوها، گزینه‌های آن به صورت اسلاید باز شده و برایمان نمایش داده میشود.

<div class="menu">
    <div id="item">Drop-Down</div>
    <div id="submenu">
        <a href="https://fullkade.com">Link 1</a>
        <a href="https://fullkade.com">Link 2</a>
        <a href="https://fullkade.com">Link 3</a>
  </div>
</div>

$("#item").click(function() {
    $("#submenu").slideToggle(500);
});

در این‌جا، ظاهر منوی خود را با HTML طراحی کرده‌ایم، اما چیزی که می‌خواهیم این است تا زمانی که ماوس روی آن کلیک کرد، منو در صورت باز بودن بسته و در صورت بسته بودن، باز شود. پس به راحتی از متد slideToggle برای اسلاید کردن آن محتوای که داخل المنت submenu می‌باشد، استفاده می‌کنیم.

پایان دوره‌ی h آموزش جی کوئری. امیدوارم لذت برده باشید.