آموزش JQuery (قسمت ۷)

آموزش-jquery-قسمت-۷

در این بخش از آموزش JQuery می خوام نحوه متحرک سازی یا همون انیمیشن عنصرهای ایجاد شده توسط HTML و CSS رو بهتون بگم.مثلا در طراحی قالب وب سایت، بخواهیم با کلیک بر روی یک دکمه، یک شکلی که قبلا ایجاد کرده ایم به سمت های مختلف حرکت کند یا حتی تغییر اندازه دهد.در JQuery‌ تابعی با نام Animate وجود دارد که ما می توانیم با تعریف دستورهای خودما در داخل این تابع و تعیین زمان انیمیشن، اجرای کدهای خود را به صورت انیمیشن درآوریم.در کدهای زیر استفاده از این تابع رو بهتون میگم.

کدهای HTML : 

<label for="animate_time">سرعت اجرای انیمیشن : </label>
<input type="text" placeholder="1000" id="animate_time">
<br>
<button id="dr-left"> حرکت به چپ </button>
<button id="dr-right"> حرکت به راست </button>
<br><br>
<button id="dr-top"> حرکت به بالا </button>
<button id="dr-bottom"> حرکت به پایین </button>
<div id="dr-box"></div>

کدهای CSS : 

<style>
    /* استفاده از # به معنی تعریف استایل با ای دی می باشد. */
   #dr-box{
       width: 300px;
       height: 150px;
       background-color: #EE5253;
       position: relative;
       top: 50px;
       left: 10px;
   }
</style>

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        // حرکت به پایین
        $('#dr-bottom').on('click', function(){
            $('#dr-box').animate({top:'150'}, get_animate_time());
        });
        // حرکت به بالا
        $('#dr-top').on('click', function(){
            $('#dr-box').animate({top:0}, get_animate_time());
        });
        // حرکت به چپ
        $('#dr-left').on('click', function(){
            $('#dr-box').animate({left:0}, get_animate_time());
        });
        // حرکت به راست
        $('#dr-right').on('click', function(){
            $('#dr-box').animate({left:150}, get_animate_time());
        }); 
    });
    // تابعی سرعت نوشته شده را بر میگرداند
    function get_animate_time(){
        var time = $('#animate_time').val();
        if(time==''){
            return 1000;
        }else{
            return parseInt(time); //-> جهت تبدیل رشته به عدد
        }
    }
</script>

تابع Animate دارای مشخصه های زیادی می باشد که برای تغییر رنگ، تغییر اندازه، تغییر شفافیت و ... استفاده کرد.

تابع ()get_animate_time که در برنامه نوشتیم فقط خواستم با نحوه نوشتن توابع (Function) در JQuery‌ آشنا بشید که ما در این تابع مقدار سرعت اجرای انیمیشن را برمیگردانیم و در صورت خالی بودن، مقدار 1000 یعنی 1 ثانیه را تنظیم می کند.

در آموزش بعدی نحوه استفاده کامل از توابع رو بهتون میگم.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟