• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
تأثير الصور بالـ Jquery – تلاشي

تأثير الصور بالـ Jquery – تلاشي

السلام عليكم
عنوان الدرس اليوم: mouseover fade effect with Jquery
اي عند تمرير الماوس على الصورة ستكون في حالة تلاشي وتبدأ بالظهور
شاهد المثال

الاشياء المستخدمة :
1.فوتوشوب
2.محرر النص (notepad)
من ناحيتي انا استخدم notepad++
3.CSS
4.Jquery

قبل ماتبدا نزل الملف كامل m3had.net/Jquery_fade_m3had.zip (الصورة + ملف الكود)
اول اشي افتح الفوتوشوب واختارلك صورة انا اخترت الصورة اللي الظاهرة امامك تقدر تنزلها من المنتدى
اعمل التالي

Image>>mode>>grayscale>>ok
بعدين احفظ الصورة
صار عندنا صورتين
وحدة ملونة والثانية بدون الوان

افتح صفحة جديد بال notepad او textpad اوال dreamweaver
اللي يعجبك
اكتب الكود التالي

< !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>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> <!-- مكان مكتبة الجي كويري -->
</head></html>

ضفنا مكتبة الجي كويري
هذا هوا كود الوظيفة (function)

<script type='text/javascript'>
$(document).ready(function(){
$("img.اسم كلاس الصورة").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>

الكود سهل مثل ماانت شايف
اي شي مش مفهوم ياريت تقولولي

المهم نيجي لكود ال CSS

<style>
.fade {
position: relative;
}
 
img.gray {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
 
img.color {
position: absolute;
left: 0;
top: 0;
}
</style>

كود ال body

<body>
<div class="fade">
<img src="2.jpg" alt="" class="gray" />
<img src="1.jpg" alt="" class="color" />
</div>
</body>

طيب :p الكود كامل

< !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>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> <!-- مكان مكتبة الجي كويري -->
<script type='text/javascript'>
$(document).ready(function(){
 
$("img.gray").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
<style>
.fade {
position: relative;
}
 
img.gray {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
 
img.color {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
 
<body>
<div class="fade">
<img src="2.jpg" alt="" class="gray" />
<img src="1.jpg" alt="" class="color" />
</div>
<br />
<br />
<br />
<br />
<p> www.3need.net </p>
</body>
</html>

3 آراء على “تأثير الصور بالـ Jquery – تلاشي”

  1. ماهر قال:

    جميل جدا عزيزي

    لكن اين يتم وضع الكود كامل ؟؟؟

    1. محمد ريان قال:

      الله يسلمك

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *