با سلام 😉
چیزی که در این مقاله می خواهیم انجام دهیم،ایجاد افکت 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>نمونه ای از نتیجه حاصله را می توانید در زیر ببینید:
امیدوارم لذت برده باشید.
موفق باشید
تو سایتی که جدید زدم خودمو کشتم نشد
خیلی خوب بود
ممنون و خسته نباشید
تو این سایت یه سری اسلایدشو برای دانلود هست
http://www.cms-iran.com/
قسمت دانلود
سلام
خیلی آموزش مفیدی بود واقعا ممنون
ولی اگه همینو بصورت css قرار بدید خیلی بهتره چون واقعا تو حجم سایت تاثیر داره
بازم ممنون
موفق باشید
سلام
من تازکار هستم و اصلا از css های position سر در نمی یارم اگر ممکنه بگین چرا اولی را relativeو دومی را absolute گرفتید
سلام دوست عزیز
می دونید که وقتی ما position یک عنصر رو absolute بکنیم ،در صفحه شناور میشه و اگه top ,left و … بدیم ، با توجه به لبه های مرورگر موقعیت دهی انجام میشه یعنی از عنصر والدش رو نادیده میگیره.برای اینکه همچین عنصری رو بتونیم درون همون والدش موقعیت دهی کنیم ، باید position والد رو relative بدیم
موفقیت
مرسی علی بود خیلی وقت بود دنبالش بودم . (تقریبا ۱ روز)
سلام دوست عزیز
مرسی 🙂
موفقیت
ممنون . خیلی جالب بود