السلام عليكم ورحمه الله وبركاته
السلام عليكم ورحمه الله وبركاته
اعجبني درس بسيط من احد المواقع الاجنبية يوضح كيفية استخدام ال jquery لعمل تأثير بسيط ولك جميل بالنسبة الي. قام الكاتب باستخدام الدالة animate للعب بخاصية الشفافية او الوضوح لمجوعة من الصور عند مرور مؤشر الفأرة عليها
لرؤية مثال الراجاء الضغط على الرابط التالي
http://www.classikiat.com/jquery_animate.html
كود المستخدم
كود HTML:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* اجعل الصور شبه شفافة في بداية الامر
*/
$(".latest_img").css("opacity","0.3");
/**
* عندما يصبح مؤشر الفأرة على احد الصور...قم بوضع خاصية الشفافية الى 1 اي اجعل الصورة واضحة تماما
*/
$(".latest_img").hover(function (){
$(this).stop().animate({opacity: 1.0}, "slow");
},
/**
* عندما يصبح مؤشر الفأرة بعيدا عن اي صورة..قم بجعل الصورة شبه شفافة
*/
function () {
$(this).stop().animate({opacity: 0.3}, "slow");
});
});
</script>
كود ال HTML
كود HTML:
<div id="images-list">
<img src="01.png" alt="1" class="latest_img" />
<img src="02.png" alt="2" class="latest_img" />
<img src="03.png" alt="3" class="latest_img" />
<img src="04.png" alt="4" class="latest_img" />
</div>