تیشرت Laravel
خرید
اطلاعات بیشتر
تیشرت اختصاصی برنامه نویس ها
خرید
اطلاعات بیشتر

ایجاد افکت fade با jquery و animate

سلام ;)

چیزی که در این مقاله می خواهیم انجام دهیم،ایجاد افکت fade در jquery است.افکت fade همانطور که می دانید به صورت ساده یعنی،تبدیل آهسته یک تصویر به تصویر دیگر که محو شدن تصویر اولیه را تداعی می کند(اگه نمی دونستید،حتما متوجه شدید دیگه!).برای همین ما دو تصویر آماده کرده ایم.یکی سیاه و سفید و یکی رنگی و می خواهیم کاری کنیم که با رفتن نشانگر موس روی تصویر سیاه و سفید،کم کم جایش را به عکس رنگی بدهد.کلید انجام این کار تابع animate است.این تابع قابلیت های فراوانی دارد ولی ما فقط می خواهیم ساده ترین روش استفاده از ان را با هم ببینیم.پس با ما همراه باشید.

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

حالا می توانیم با کد زیر،کتابخانه jQuery را به صفحه ی سایت الحاق کنیم:

<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

به شکل زیر از این تابع استفاده خواهیم کرد:

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

کد CSS:

<style>

</style>

و کدهای لازم برای جاگذاری در صفحه:

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

وقتی تمام اینها را در کنار هم بگذاریم،صفحه زیر متولد می شود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
<style>
div.fadehover {
	position: relative;
	}

img.a {
	position: absolute;
	left: 0;
	top: 0;
        z-index: 10;
	}

img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
</style>
</head>

<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>

نمونه ای از نتیجه حاصله را می توانید در زیر ببینید:

در همین رابطه :   6 پلاگین عالی برای آپلود آسان فایل ها بوسیله jQuery

امیدوارم لذت برده باشید.

منبع

دسته بندی : jQuery

11 نظر

  1. سلام
    خیلی آموزش مفیدی بود واقعا ممنون
    ولی اگه همینو بصورت css قرار بدید خیلی بهتره چون واقعا تو حجم سایت تاثیر داره
    بازم ممنون
    موفق باشید

    1. سلام دوست عزیز

      می دونید که وقتی ما position یک عنصر رو absolute بکنیم ،در صفحه شناور میشه و اگه top ,left و … بدیم ، با توجه به لبه های مرورگر موقعیت دهی انجام میشه یعنی از عنصر والدش رو نادیده میگیره.برای اینکه همچین عنصری رو بتونیم درون همون والدش موقعیت دهی کنیم ، باید position والد رو relative بدیم

      موفقیت

پاسخ دادن به صنم2010 لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in عكاسی
۳۲ عکس پرتره بسیار زیبا (سری سوم)

استقبال گرم شما دوستان از موضوع عکس های پرتره  باعث شد این بار نیز با گلچینی از زیباترین عکس های پرتره...

Close