افکت fade in و fade out برای تصویر با استفاده از jQuery

در این مقاله قصد داریم نحوه ایجاد افکت برای تصاویر را در ASP.net توضیح دهیم. با استفاده از js/jquery می توانیم به تصاویر حرکت دهیم . در اینجا افکت fade in /fade out را پیاده سازی خواهیم کرد.

برای انجام این کار ابتدا یک پروژه ASP.net ایجاد میکنیم. یک Web form به آن اضافه کرده و در قدم اول در قسمت head صفحه کدهای زیر را وارد میکنیم.

<head>  
    <meta charset="utf-8" />  
    <title></title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
</head>

css مناسب را به صفحه اضافه میکنیم. البته بهتر است یک فایل CSS جداگانه ایجاد شود و سپس در صفحه قرار داد .

کدهای CSS به صورت زیر می باشند :

<style>  
    .img_outer {  
        width: 310px;  
        height: 344px;  
        position: relative;  
        float: left;  
        margin: 10px;  
    }  
      
    .img_outer img {  
        position: absolute;  
        z-index: 1;  
        cursor: pointer;  
    }  
      
    .img_blur {  
        opacity: 0.84;  
    }  
</style>

اکنون چند تصویر را به صفحه اضافه میکنیم. که بتوانیم بر روی آنها افکت ها را اجرا کنیم.

 <body style="height: 1000px" dir="rtl" >
        <h3><a href="http://barnamenevisan.org/">مرجع تخصصی برنامه نویسان</a></h3>
        <div class="list_leftp">  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
            <div class="img_outer">  
                <a href="#" data-hr="http://www.firstcry.com"> <img src="http://cdn.fcglcdn.com/brainbees/banners/04Dec15-todaysdeal4.jpg" alt="" title="" /> </a>  
            </div>  
        </div>  
    </body>

صفت Data-hr برای انتساب لینک به <a> استفاده شده است.

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

    <script type="text/javascript">  
        $(document).ready(function(e)  
        {  
            $('img').hover(function()  
            {  
                $('.img_outer img').addClass('img_blur');  
                $(this).removeClass('img_blur').animate(  
                {  
                    'left': '-10px',  
                    'top': '-10px',  
                    'width': '330px'  
                });  
            }, function()  
            {  
                $('.img_outer img').removeClass('img_blur');  
                $(this).animate(  
                {  
                    'left': '0',  
                    'top': '0',  
                    'width': '310px'  
                });  
            });  
            $(document).on('click', 'a', function(event)  
            {  
                var x = $(this).attr('data-hr');  
                $(this).find('img').fadeOut(700).fadeIn(700, function(event)  
                {  
                    window.open(x, "_blank");  
                });  
                event.preventDefault();  
            });  
        });  
    </script>

در رویداد یک تصویر ، کلاس img_blur برای تار شدن یک تصویر اضافه شده است . پس از آن ویژگی های چپ و بالا و عرض برای حرکت یک تصویر تنظیم می شوند.

یکبار این ویژگی ها تنظیم می شوند ، کلاس های خاص حذف می شوند و همه این ویژگی ها به حالت پیش فرض خود در می آیند.

خطوط باقی مانده کد ، برای تغییر مسیر و fade in/ fade out شدن یک تصویر انجام می شود.

هنگامی که بر روی تصویر کلیک میکنید، مقدار صفت data-hr در متغیر X ذخیره می شود. در این مرحله می توانیم برای افکت زمانی را در نظر بگیریم.

فایل های ضمیمه

4471_WebApplication3.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

افکت fade in و fade out برای تصویر با استفاده از jQuery

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید