jQuery : إضافة تأثير التلاشي عند تمرير المؤشر

إضافة نوع من التفاعل و الحركات الجمالية يضفي مزيداً من التألف و الإبداع إلى موقعك ، من أشهر هذه التأثيرات هي تأثير التلاشي Fade ، في هذا الدرس سنستخدم صورة سوداء وصورة ملونة فكرة الدرس هي تحويل الصورة السوداء إلى صورة ملونة عند تمرير الماوس فوقها بحركة جميلة . الدرس يهدف إلى التعريف بدالة animate في مكتبة jQuery وبالطبع هناك إستخدامات كثيرة لهذه الدالة ولكن في هذا الدرس سأتطرق إلى مثال بسيط أتمنى أن يعجبكم .

قبل أن أبدء عليكم تحميل الصور التي سنقوم بتطبيق الدرس عليها إنها صورة ملتقطة أثناء ثورة مصر .

 

الخطوة الأولى : إستدعاء مكتبة الـ jQuery

تستطيع تحميل هذه المكتبة من خلال الموقع الرسمي لها jquery.com إذا لم تكن موجودة معك ، بعد تحميل الملف سنقوم بتضمينه بين وسمي الـ head في الملف .

<script src="js/jquery.js" type="text/javascript"/>

ز الآن إلى إستخدام دالة animate

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

وكما تلاحظ إستخدمنا الدالة مع خاصية opacity في الـ CSS ويجدر القول بأن هذه الخاصية فقط تعمل على المتصفحات الحديثة ، بإستطاعتك إستخدام الدالة بشكل مختلف و بخواص أخرى ولكن دعنا نكمل درسنا .

الخطوة الثانية : إضافة خواص الـ CSS

كل ما سنقوم بعمله في هذه الخطوة هي التأكد من أن الصورتان في موضع واحد أي أن الصورة a فوق الصورة b تماماً .

<style type="text/css">
 div.fade-hover { position: relative; margin: 50px 140px 0px 140px; }
 img.a {    position: absolute;    right: 0; top: 0; z-index: 10; }
 img.b {    position: absolute;    right: 0; top: 0; }
</style>

الخطوة الثالثة : إضافة كود جسم الصفحة

الآن إلى الخطوة الاخيرة إضافة محتوى وسم الـ Body

<div class='fade-hover'>
 <img src="img/quran-gray.jpg" alt="" class='a' />
 <img src="img/quran.jpg" alt="" class='b' />
 </div>

النتيجة النهائية

أتمنى أن تكون النتيجة قد لاقت إعجابكم ، و لاتنسوا مشاركتنا بآرائكم و إستفسارتكم حول الدرس .

4 رأي حول “jQuery : إضافة تأثير التلاشي عند تمرير المؤشر”

اترك رد