افکت‌ها در jQuery | قسمت دوم: افکت‌های Slide و Animation

در این قسمت، دو بخش مهم دیگر از ابزار افکت ها در jQuery را می آموزید. ابتدا در رابطه با sliding یا افکت های slide مطالبی را ارائه می کنیم و سپس ساختن انیمیشن یا animate در جی کوئری را با هم یاد می گیریم.

متدهای ()slideDown و ()slideUp در jQuery

از متدهای ()slideUp و ()slideDown جهت پنهان کردن و آشکار کردن عناصر html در jQuery استفاده می کنیم. این مکانیزم با تغییر مقدار خاصیت ارتفاع (height) انجام می شود. در کد مثال زیر کاربرد متدهای ()slideDown و ()slideUp را مشاهده می کنید:

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

مانند سایر متدهای مرتبط با افکت های jQuery، می توانید برای متدهای مثال بالا متغیر duration یا speed را جهت کنترل زمان اجرای متدها و این که اجرای متدهای slideUp و slideDown چقدر طول بکشد، در نظر بگیرید.

جهت تعیین مقدار پارامتر duration می توانید از مقادیر پیش فرض "fast" و "slow" یا از عددی در واحد میلی ثانیه بهره ببرید. هر چقدر مقدار این عدد بیشتر باشد، افکت مورد نظر یا اجرای متدهای بالا بیشتر طول می کشد.

در کد مثال زیر کاربرد این پارامتر را در متدهای slideUp و slideDown مشاهده می کنید:

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

همچنین شما می توانید از توابع callback استفاده کنید که بعد از متدهای slideDown و slideUp اجرا می شوند. در قسمت های بعدی مطالب بیش تری را راجع به توابع callback مشاهده خواهید کرد.

در کد مثال زیر کاربرد توابع callback را در متدهای slideDown و slideUp مشاهده می کنید:

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

متد ()slideToggle در jQuery

متد ()slideToggle بنابر حالت اولیه عنصر html عملکرد خود را نشان می دهد؛ اگر عنصر مربوطه در حالت اولیه پنهان باشد، با افزایش ارتفاع عنصر آشکار می شود و اگر عنصر html در حالت اولیه آشکار باشد، با کاهش ارتفاع عنصر مربوطه پنهان می شود. در واقع متد ()slideToggle بین دو متد ()slideUp و ()slideDown جابجا می شود.

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

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

متد ()slideToggle نیز مانند متدهای ()slideUp و ()slideDown می تواند از پارامتری جهت تعیین سرعت اجرای متد استفاده کند. مثال این کاربرد در کد زیر آمده است:

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

همچنین به طور مشابه دو متد ()slideUp و ()slideDown در متد ()slideToggle نیز می توانید از توابع callback با همان کاربرد استفاده کنید. در نمونه زیر از تابع callback در متد ()slideToggle استفاده شده است:

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

در ادامه این قسمت به مبحث انیمیشن در جی کوئری می پردازیم و می آموزید که چطور با استفاده از خاصیت های css و jQuery انیمیشن بسازید.

متد ()animate در jQuery

جهت ساخت انیمیشن های سفارشی سازی شده از متد animate در جی کوئری استفاده می شود. به صورت معمول از متد ()animate در جهت تغییر خواص css که عددی هستند مانند height ،width ،margin ،padding ،opacity ،top ،left و ... برای ایجاد انیمیشن در جی کوئری استفاده می شود. اما خواص غیر عددی در css مانند color یا background-color با قابلیت پایه ای jQuery در انیمیشن بکار گرفته نمی شوند.

توجه: همه خواص css قابلیت انیمیشن سازی ندارند. به طور عمومی هر خاصیت css که عددی، درصدی یا مقدار رنگ را نشان می دهد، قابلیت بکارگیری در انیمیشن ها را دارند. اما انیمیشن رنگ ها توسط کتابخانه core jQuery پشتیبانی نمی شود. برای دستکاری و استفاده از رنگ ها در انیمیشن ها می توانید از jQuery Color Plugin استفاده کنید.

سینتکس استفاده از متد ()animate

ساختار پایه متد animate در جی کوئری به صورت زیر است:

$(selector).animate({ properties }, duration, callback);

حالا پارامترهای بکار رفته در ساختار بالا را بررسی می کنیم:

• پارامتر properties شامل خواص css می شود.
• پارامتر duration که یک پارامتر دلخواه است، مشخص می کند که انیمیشن چقدر باید طول بکشد و سرعت آن را تعیین می کند. مقدار این پارامتر می تواند مقادیر پیش فرض "slow" یا "fast" یا عددی در واحد میلی ثانیه باشد که هر چقدر این عدد بیشتر باشد، مقدار زمان بیشتری طول می کشد تا این انیمیشن اجرا شود.
• متد callback در ساختار بالا که استفاده از آن دلخواه است، بعد از اجرای animate در جی کوئری می تواند فراخوانده و اجرا شود.

کد مثال زیر، نمونه ای از کاربرد متد ()animate در jQuery می باشد. در واقع کد زیر که انیمیشنی ایجاد می کند به این صورت عمل می کند که با کلیک کردن بر روی دکمه، 300 پیکسل عکس را از مکان اصلی خودش به سمت راست می برد.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

نکته: همه عناصر html به صورت پیش فرض دارای پوزیشن استاتیک هستند. زمانی که یک عنصر پوزیشن استاتیک دارد، نمی توانید آن را به حرکت در آورید. بنابراین در صورتی که بخواهید آن عنصر را در انیمیشن به حرکت درآورید، باید صفت position آن عنصر را به fixed ،relative یا absolute تغییر دهید.

ایجاد انیمیشن در جی کوئری با چند خاصیت css به صورت یکجا

شما می توانید به صورت یکجا متد ()animate را به چند خاصیت css اعمال کنید. به همین منظور می توانید چند خاصیت css را با هر مقداری انتخاب و با آن ها انیمیشن ایجاد کنید.

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

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

توجه: توجه کنید که نامگذاری صفات css هنگامی که در متد ()animate استفاده می شوند باید به صورت camel-case باشند. بنابراین مثلا هنگامی که بخواهید صفت font-size را در متد ()animate بکار ببرید، باید به صورت fontSize بنویسید، یا margin-left را به صورت marginLeft بنویسید و یا border-width را به صورت borderWidth بنویسید.

نکته: صفت border-style را قبل از border-width در متد ()animate بکار ببرید زیرا این ترتیب مهم است. مقدار پیش فرض برای border-style مقدار none در نظر گرفته می شود.

استفاده از صفات css در انیمیشن به صورت صفی از خواص یا به صورت مجزا

می توانید هنگام بکارگیری صفات css در متد ()animate، آن ها به صورت صفی و یک به یک در ()animate اعمال کنید. در واقع سری دستورات ()animate به یکدیگر متصل می شوند. در قسمت بعدی مطالب بیش تری راجع به اتصال دستورات مشاهده خواهید کرد.

در کد مثال زیر یک سری انیمیشن متصل را مشاهده می کنید که هر انیمیشن از نقطه پایانی انیمیشن قبلی شروع می شود:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

ایجاد انیمیشن با مقادیر نسبی خواص css

شما می توانید به کمک مقادیر نسبیِ خواصی که می خواهید آن ها را در انیمیشن بکار ببرید، انیمیشن ایجاد کنید. وقتی مقدار خاصیتی با مقدار پیش فرض "=+" یا "=-" آغاز شود، مقدار نهایی در انیمیشن با در نظر گرفتن (اضافه کردن یا کم کردن) مقدار کنونی یک صفت خاص در نظر گرفته می شود.

در مثال زیر این کاربرد را مشاهده می کنید:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

استفاده از خواص css در انیمیشن با مقادیر پیش فرض

علاوه بر مقادیر عددی، هر صفتی می تواند مقادیر پیش فرض "show"، "hide" و "toggle" را بپذیرد. این عملکرد در زمانی بسیار سودمند است که بخواهید یک خاصیت را در animate از حالت کنونی به حالت اولیه ببرید یا عکس این کار را انجام دهید.

در کد زیر این کاربرد را مشاهده کنید:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>