افکت Fade-in Fade-out به اسلایدر با استفاده از jQuery

در این مقاله نحوه استفاده ازافکت fadeOut و fadeIn برای ایجاد یک تصویر اسلایدر با استفاده ازHTML5 وCSS3 در jQuery را به شما آموزش می دهیم.

ساختار کلی استفاده از متد ()fadeIn .به شکل زیر می باشد

selector.fadeIn( speed, [callback])

این افکت ، opacity(میزان تغییر وضوح تصویر )عنصر مورد اثر خود را از حالت نمایان به حالت مخفی تغییر می دهد. این متد معمولا همراه با متد fadeOut() استفاده می شود.

ساختار کلی استفاده از متد ()fadeOut .به شکل زیر می باشد.

selector.fadeOut( speed, [callback] );

این متد مشابه متد ()fadeTo. می باشد. المنت های متد قابل رویت نمی باشد و می تواند سطح شفافیت نهایی را مشخص کند. از کد basic HTML استفاده می کنیم تا المنت های HTML زیر را ایجاد کنیم.

<!DOCTYPE html>  
<html>  
  
<head></head>  
  
<body>  
    <div id="pics">  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/02-128.png" width="128" height="128" id="picOne" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/03-128.png" width="128" height="128" id="picTwo" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/04-128.png" width="128" height="128" id="picThree" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/05-128.png" width="128" height="128" id="picFour" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/06-128.png" width="128" height="128" id="picFive" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/07-128.png" width="128" height="128" id="picSix" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/08-128.png" width="128" height="128" id="picSeven" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/09-128.png" width="128" height="128" id="picEight" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/10-128.png" width="128" height="128" id="picNine" />  
    </div>  
</body>  
  
</html>

HTML

کد HTML بالا گروه المنت div و المنت های فرزند خود را تعریف می کند. با استفاده از تگ IMG تصاویر متعددی را بین تگ div والد اضافه می کنیم.

CSS

با استفاده از کد CSS برای همه ی المنت هایی که در HTML تعریف کردیم مانند کد زیر Style های زیر را تعیین می کنیم.

#  
pics {  
    margin - left: 600 px;  
    margin - top: 150 px;  
    margin - bottom: 150 px;  
}  
  
#  
title {  
    margin - left: 500 px;  
    margin - right: 320 px;  
    margin - top: 150 px;  
    margin - bottom: 150 px;  
  
}  
body {  
    background - color: MediumSpringGreen;  
}#  
picOne, #picTwo, #picThree, #picFour, #picFive, #picSix, #picSeven, #picEight, #picNine {  
    position: absolute;  
    display: none;  
}#  
pics {  
    width: 128 px;  
    height: 128 px;  
}

قبل از اضافه کردن کد CSS، مطمئن شوید که آن کل ناحیه نمایش صفحه مرورگر را می پوشاند.در کد CSS قبل کل فرایند طراحی المنت های HTML تعریف می شود.

jQuery scripting

در اولین قدم برای بخش jQuery scripting ، کتابخونه ی مرجع jquery مورد نیاز رو در بخش المان head صفحتون وارد کنید.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

کد زیر، کد جاوا اسکریپت و jQuery که در این آموزش استفاده کرده ایم.

<script>  
    $(document).ready(function() {  
        $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picFive').delay(20000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picSix').delay(25000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picSeven').delay(30000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picEight').delay(35000).fadeIn(1500).delay(3500).fadeOut(1500);  
        $('#picNine').delay(40000).fadeIn(1500).delay(3500).fadeOut(1500);  
        var delay = 40000;  
        var URL = 'http://2.bp.blogspot.com/-2mNLuYYudGs/VV__xP-jFiI/AAAAAAAABsg/CMXsLd_zlnc/s1600/best-wishes-of-onam.jpg';  
        setTimeout(function() {  
            window.location = URL;  
        }, delay);  
    });  
</script>

کد jQuery scripting قبل عملکرد برنامه را بهبود می بخشد و افکت ها و عملکرد UI کل HTML را تعریف می کند.

کد نهایی

کد های HTML ، CSS ، jQuery scripting کد نهایی هستند که در این آموزش استفاده کردیم.

<!DOCTYPE html>  
<html>  
  
<head>  
    <style>  
        #pics {  
            margin-left: 600px;  
            margin-top: 150px;  
            margin-bottom: 150px;  
        }  
          
        #title {  
            margin-left: 500px;  
            margin-right: 320px;  
            margin-top: 150px;  
            margin-bottom: 150px;  
        }  
          
        body {  
            background-color: MediumSpringGreen;  
        }  
          
        #picOne,  
        #picTwo,  
        #picThree,  
        #picFour,  
        #picFive,  
        #picSix,  
        #picSeven,  
        #picEight,  
        #picNine {  
            position: absolute;  
            display: none;  
        }  
          
        #pics {  
            width: 128px;  
            height: 128px;  
        }  
    </style>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
    <script>  
        $(document).ready(function() {  
            $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picFive').delay(20000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picSix').delay(25000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picSeven').delay(30000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picEight').delay(35000).fadeIn(1500).delay(3500).fadeOut(1500);  
            $('#picNine').delay(40000).fadeIn(1500).delay(3500).fadeOut(1500);  
            var delay = 40000;  
            var URL = 'http://2.bp.blogspot.com/-2mNLuYYudGs/VV__xP-jFiI/AAAAAAAABsg/CMXsLd_zlnc/s1600/best-wishes-of-onam.jpg';  
            setTimeout(function() {  
                window.location = URL;  
            }, delay);  
        });  
    </script>  
</head>  
  
<body>  
    <div id="pics">  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/02-128.png" width="128" height="128" id="picOne" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/03-128.png" width="128" height="128" id="picTwo" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/04-128.png" width="128" height="128" id="picThree" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/05-128.png" width="128" height="128" id="picFour" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/06-128.png" width="128" height="128" id="picFive" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/07-128.png" width="128" height="128" id="picSix" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/08-128.png" width="128" height="128" id="picSeven" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/09-128.png" width="128" height="128" id="picEight" />  
        <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/10-128.png" width="128" height="128" id="picNine" />  
    </div>  
</body>  
  
</html>

فایل Index.html را در یک مرورگر باز کنید.