آموزش jquery قسمت دوازدهم کار با Animation Fade
0 0

آموزش jquery قسمت دوازدهم کار با Animation Fade


آموزش jquery قسمت دوازدهم کار با Animation Fade

در پست های قبلی Animation Show and Hide را توضیح دادیم و در ادامه این آموزش به انیمیشن های FadeIn و FadeOut و FadeTo می پردازیم.

FadeIn : برای ظاهر کردن

FadeOut : برای پنهان کردن

FadeTo : از یک مقداری مانند slow شروع شده و به یک مقدار عددی (0 تا 1) خطم می شود.

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

Slow

انیمیشن را با سرعت آهسته نمایش می دهد

Normal

انیمیشن را با سرعت معمولی نمایش می دهد

Fast

انیمیشن را با سرعت سریع نمایش می دهد

عدد

یک عدد دریافت می کند و انیمیشن را با آن سرعت نمایش می دهد

در مثال های زیر  ابتدا عنصر مورد نظر انتخاب کردیم و سپس بعد از کلیک روی آنها تابع انیمیشن را فراخوانی کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnFadeInSlow").click(function () {
                $("#divAnimation").fadeIn("slow");
            });
            $("#btnFadeInNormal").click(function () {
                $("#divAnimation").fadeIn("normal");
            });
            $("#btnFadeInFast").click(function () {
                $("#divAnimation").fadeIn("fast");
            });
            $("#btnFadeInSpeed").click(function () {
                $("#divAnimation").fadeIn(5000);
            });

            $("#btnFadeOutSlow").click(function () {
                $("#divAnimation").fadeOut("slow");
            });
            $("#btnFadeOutNormal").click(function () {
                $("#divAnimation").fadeOut("normal");
            });
            $("#btnFadeOutFast").click(function () {
                $("#divAnimation").fadeOut("fast");
            });
            $("#btnFadeOutSpeed").click(function () {
                $("#divAnimation").fadeOut(5000);
            });

            $("#btnFadeToSlow").click(function () {
                $("#divAnimation").fadeTo("slow", 0.3);
            });
            $("#btnFadeToNormal").click(function () {
                $("#divAnimation").fadeTo("normal", 0.3);
            });
            $("#btnFadeToFast").click(function () {
                $("#divAnimation").fadeTo("fast", 1.0);
            });
            $("#btnFadeToSpeed").click(function () {
                $("#divAnimation").fadeTo(5000, 1.0);
            });
        });
    </script>
    <style type="text/css">
        #divAnimation {
            background-color: blueviolet;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <button id="btnFadeInSlow">FadeIn Slow</button>
    <button id="btnFadeInNormal">FadeIn Normal</button>
    <button id="btnFadeInFast">FadeIn Fast</button>
    <button id="btnFadeInSpeed">FadeIn Speed</button>
    <br />
    <button id="btnFadeOutSlow">FadeOut Slow</button>
    <button id="btnFadeOutNormal">FadeOut Normal</button>
    <button id="btnFadeOutFast">FadeOut Fast</button>
    <button id="btnFadeOutSpeed">FadeOut Speed</button>
    <br />
    <button id="btnFadeToSlow">FadeTo 0.3</button>
    <button id="btnFadeToNormal">FadeTo 0.3</button>
    <button id="btnFadeToFast">FadeTo 1.0</button>
    <button id="btnFadeToSpeed">FadeTo 1.0</button>
    <div id="divAnimation">Animation Jquery</div>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۵ خرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم