jQuery Effects
الجزء الرابع
(5)Animate effects:
وهى دالة تقوم بعمل تاثير حركة جزء معين من صفحة الويب عند الضغط عليها كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js” >
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left:’300px’});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style=”background:blue;height:120px;width:100px;position:absolute;”>
</div>
</body>
</html>
حيث عند الضغط على (button) يتحرك الصندوق الناتج من كود( div) ناحية اليمين على بعد (300px) من جهة اليسار ويمكن تغير اتجاة حركتة عن طريق تغيير كلمة (left) الى (right).
(6)stop effects:
وهى دالة تقوم بايقاف تاثير اى حدث من الاحداث السابقة التى تعلمناها قبل ان ينتهى كالتالى:
مثال:
<!DOCTYPE html>
<html>
<head>
<script src=”jquery-1.10.2.min.js” >
$(document).ready(function(){
$(“#start”).click(function(){
$(“#panel”).slideDown(5000);
});
$(“#stop”).click(function(){
$(“#panel”).stop();
});
});
</script>
<style type=”text/css”>
panel#
{
padding:5px;
background-color:blue;
}
</style>
</head>
<body>
<button id=”start”>start sliding</button>
<button id=”stop”>Stop sliding</button>
<div id=”panel”> sliding </div>
</body>
</html>
حيث عند الضغط على (button) الاول يتم تنفيذ حدث (slide down) وعند الضغط على (button) الثانى يتوقف حدث (slide down) فى ذلك الوقت الذى يتم فية الضغط على (button) وبالمثل يمكن استخدام دالة (stop) مع باقى الاحداث.
w3s4arb 