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

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

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






حالا می توانیم با کد زیر،کتابخانه jQuery را به صفحه ی سایت الحاق کنیم:
?
[TABLE]
[TR]
[TD="class: gutter"]1
[/TD]
[TD="class: code"]<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>

[/TD]
[/TR]
[/TABLE]


به شکل زیر از این تابع استفاده خواهیم کرد:
?
[TABLE]
[TR]
[TD="class: gutter"]1
2
3
4
5
6
7
8
9
10
11
12
[/TD]
[TD="class: code"]<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>

[/TD]
[/TR]
[/TABLE]


کد CSS:
?
[TABLE]
[TR]
[TD="class: gutter"]1
2
3
[/TD]
[TD="class: code"]<style>

</style>

[/TD]
[/TR]
[/TABLE]


و کدهای لازم برای جاگذاری در صفحه:
?
[TABLE]
[TR]
[TD="class: gutter"]1
2
3
4
[/TD]
[TD="class: code"]<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

[/TD]
[/TR]
[/TABLE]


وقتی تمام اینها را در کنار هم بگذاریم،صفحه زیر متولد می شود:
?
[TABLE]
[TR]
[TD="class: gutter"]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
[/TD]
[TD="class: code"]<!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>

[/TD]
[/TR]
[/TABLE]

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

​

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