JQuery الدرس الخامس فى

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) مع باقى الاحداث.

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: