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

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

موضوع آموزش JQuery‌این قسمت در مورد Fade ها می باشد.عملکرد Fade همانند Hide و Show کردن عناصر می باشد یعنی برای ظاهر و پنهار کردن استفاده می شود با این تفاوت که یک سری انیمیشن از قبل تعریف شده ای برای انجام این کار دارند.

کدهای HTML : 

<h5> Fade‌ آموزش </h5>
<button id="dr-fadeIn">fadeIn</button>
<button id="dr-fadeOut">fadeOut</button>
<button id="dr-fadeTo">fadeTo</button>
<button id="dr-fadeToggle">fadeToggle</button>

<div class="dr box1"></div>
<div class="dr box2"></div>
<div class="dr box3"></div>
<div class="dr box4"></div>

کدهای CSS : 

<style>
    .dr{
        width: 50px;
        height: 50px;
        margin: 10px;
    }
    .dr.box1{
        background-color: #4CAF50; 
    }
    .dr.box2{
        background-color: #2196F3; 
    }
    .dr.box3{
        background-color: #E91E63; 
    }
    .dr.box4{
        background-color: #795548; 
    }
</style>

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('#dr-fadeIn').on('click', function(){ //-> For FadeIn Function
            $(".box1").fadeIn(500);
            $(".box2").fadeIn(1000);
            $(".box3").fadeIn(1500);
            $(".box4").fadeIn(2000);
        });
        $('#dr-fadeOut').on('click', function(){ //-> For FadeOut Function
            $(".box1").fadeOut(500);
            $(".box2").fadeOut(1000);
            $(".box3").fadeOut(1500);
            $(".box4").fadeOut(2000);
        });
        $('#dr-fadeToggle').on('click', function(){ //-> For FadeToggle Function
            $(".box1").fadeToggle(500);
            $(".box2").fadeToggle(1000);
            $(".box3").fadeToggle(1500);
            $(".box4").fadeToggle(2000);
        });
        $('#dr-fadeTo').on('click', function(){ //-> For FadeTo Function
            $(".box1").fadeTo(500, 0.10);
            $(".box2").fadeTo(1000, 0.30);
            $(".box3").fadeTo(1500, 0.50);
            $(".box4").fadeTo(2000, 0.70);
        });
    });
</script>

تابع Fade دارای ۴ حالت می باشد که شامل : 

  1. FadeIn - عملکرد تابع Show را دارد.
  2. FadeOut - عملکرد تابع Hide‌ را دارد.
  3. FadeToggle - مانند تابع Toggle عمل می کند. (عنصری که پنها است را آشکار و عنصر آشکار را پنها می کند)
  4. FadeTo - شامل پارامتر زمان و شفافیت (opacity) می باشد و به این صورت عمل می کند که توسط زمان و عدد شفافیت تنظیم شده عنصر را تغییر می دهد.

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

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



پرسش و پاسخ

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