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

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


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

در این پست در ادامه آموزش ایجاد انیمیشن با jquery به انیمیشن های slideUp و slideDown و slideToggle می پردازیم.

SlideUp : عنصر انتخابی را از پایین به بالا مخفی می کند

 SlideDown : عنصر انتخابی را از بالا به پایین نمایش می دهد

SlideToggle : دو عمل بالا را به تنهای انجام می دهد.

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

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 () {
            $("#btnslideUpSlow").click(function () {
                $("#divAnimation").slideUp("slow");
            });
            $("#btnslideUpNormal").click(function () {
                $("#divAnimation").slideUp("normal");
            });
            $("#btnslideUpFast").click(function () {
                $("#divAnimation").slideUp("fast");
            });
            $("#btnslideUpSpeed").click(function () {
                $("#divAnimation").slideUp(5000);
            });

            $("#btnslideDownSlow").click(function () {
                $("#divAnimation").slideDown("slow");
            });
            $("#btnslideDownNormal").click(function () {
                $("#divAnimation").slideDown("normal");
            });
            $("#btnslideDownFast").click(function () {
                $("#divAnimation").slideDown("fast");
            });
            $("#btnslideDownSpeed").click(function () {
                $("#divAnimation").slideDown(5000);
            });

            $("#btnslideToggleSlow").click(function () {
                $("#divAnimation").slideToggle("slow");
            });
            $("#btnslideToggleNormal").click(function () {
                $("#divAnimation").slideToggle("normal");
            });
            $("#btnslideToggleFast").click(function () {
                $("#divAnimation").slideToggle("fast");
            });
            $("#btnslideToggleSpeed").click(function () {
                $("#divAnimation").slideToggle(5000);
            });
        });
    </script>
    <style type="text/css">
        #divAnimation {
            background-color: blueviolet;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <button id="btnslideUpSlow">slideUp Slow</button>
    <button id="btnslideUpNormal">slideUp Normal</button>
    <button id="btnslideUpFast">slideUp Fast</button>
    <button id="btnslideUpSpeed">slideUp Speed</button>
    <br />
    <button id="btnslideDownSlow">slideDown Slow</button>
    <button id="btnslideDownNormal">slideDown Normal</button>
    <button id="btnslideDownFast">slideDown Fast</button>
    <button id="btnslideDownSpeed">slideDown Speed</button>
    <br />
    <button id="btnslideToggleSlow">slideToggle Slow</button>
    <button id="btnslideToggleNormal">slideToggle Normal</button>
    <button id="btnslideToggleFast">slideToggle Fast</button>
    <button id="btnslideToggleSpeed">slideToggle 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 () {
            $("#btnSlideUp").click(function () {
                $("#divAnimation").slideUp(5000, function () {
                    alert("Finished");
                });
            });

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

دانلود

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

نظر / سوال

Captcha

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