آموزش jquery قسمت یازدهم کار با انیمیشن Show و Hide
0 0

آموزش jquery قسمت یازدهم کار با انیمیشن Show و Hide


آموزش jquery قسمت یازدهم کار با انیمیشن Show و Hide

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

برای اعمال انیمیشن به عناصر انتخابی از show ، hide و toggle استفاده می شود این توابع چهار ورودی به صورت زیر دریافت می کنند.

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 () {
            $("#btnShowSlow").click(function () {
                $("#divAnimation").show("slow");
            });
            $("#btnShowNormal").click(function () {
                $("#divAnimation").show("normal");
            });
            $("#btnShowFast").click(function () {
                $("#divAnimation").show("fast");
            });
            $("#btnShowSpeed").click(function () {
                $("#divAnimation").show(5000);
            });

            $("#btnHideSlow").click(function () {
                $("#divAnimation").hide("slow");
            });
            $("#btnHideNormal").click(function () {
                $("#divAnimation").hide("normal");
            });
            $("#btnHideFast").click(function () {
                $("#divAnimation").hide("fast");
            });
            $("#btnHideSpeed").click(function () {
                $("#divAnimation").hide(5000);
            });

            $("#btnToggleSlow").click(function () {
                $("#divAnimation").toggle("slow");
            });
            $("#btnToggleNormal").click(function () {
                $("#divAnimation").toggle("normal");
            });
            $("#btnToggleFast").click(function () {
                $("#divAnimation").toggle("fast");
            });
            $("#btnToggleSpeed").click(function () {
                $("#divAnimation").toggle(5000);
            });
        });
    </script>
    <style type="text/css">
        #divAnimation {
            background-color: blueviolet;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <button id="btnShowSlow">show Slow</button>
    <button id="btnShowNormal">show Normal</button>
    <button id="btnShowFast">show Fast</button>
    <button id="btnShowSpeed">show Speed</button>
    <br />
    <button id="btnHideSlow">hide Slow</button>
    <button id="btnHideNormal">hide Normal</button>
    <button id="btnHideFast">hide Fast</button>
    <button id="btnHideSpeed">hide Speed</button>
    <br />
    <button id="btnToggleSlow">Toggle Slow</button>
    <button id="btnToggleNormal">Toggle Normal</button>
    <button id="btnToggleFast">Toggle Fast</button>
    <button id="btnToggleSpeed">Toggle Speed</button>
    <div id="divAnimation">Animation Jquery</div>
</body>
</html>

 

نوشتن تابع داخل توابع انیمیشن

اگر بخواهیم بعد از پایان انیمیشن کار خاصی انجام دهیم یا یک پیغام را به کاربر نمایش دهیم می توانیم داخل توابع انیمیشن تابع دیگر نیز به صورت زیر بنویسیم.

<!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 () {
            $("#btnShow").click(function () {
                $("#divAnimation").show(5000, function () {
                    alert("Finished");
                });
            });

            $("#btnHide").click(function () {
                $("#divAnimation").hide();
            });
        });
    </script>
    <style type="text/css">
        #divAnimation {
            background-color: blueviolet;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <button id="btnShow">show</button>
    <button id="btnHide">hide</button>
    <div id="divAnimation">Animation Jquery</div>
</body>
</html>

دانلود

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

نظر / سوال

Captcha

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