JQuery الدرس الثانى فى

jQuery Effects

الجزء الاول

وهى عبارة عن دوال تستخدم لعمل تاثيرات على جزء معين فى صفحة الويب كالاخفاء والاظهار والانيميشن وغيرها كالتالى:

(1)hide,show effects:

وهى دوال تقوم بعمل تاثير اخفاء (hide) جزء معين من صفحة الويب او اظهارة (show) كالتالى:

<!DOCTYPE html>

<html>

<head>

< src=”jquery-1.10.2.min.js” script>

$(document).ready(function(){

$(“#hide”).click(function(){

$(“p”).hide();

});

$(“#show”).click(function(){

$(“p”).show();

});

});

</script>

</head>

<body>

<p> click on the “Hide” button to disappear me.</p>

<button id=”hide”>Hide</button>

<button id=”show”>Show</button>

</body>

</html>

حيث الكود السابق عبارة عن (button) الاول عند الضغط علية يقوم باخفاء النص الموجود فى كود البارجراف اما (button) الثانى عند الضغط علية يقوم بعرض النص مرة اخرى.

ايضا يمكن التحكم بسرعة اخفاء النص عن طريق استخدام بارمتر مع دالة (hide) يتم فية تحديد سرعة اخفاء النص كالتالى:

<!DOCTYPE html>

<html>

<head>

<script src=” jquery-1.10.2.min.js “>

$(document).ready(function(){

$(“button”).click(function(){

$(“p”).hide(1000);

});

});

</script>

</head>

<body>

<button>Hide</button>

<p>the text will disappear after one second.</p>

</body>

</html>

حيث البارمتر (1000) يقوم باخفاء النص بعد ثانية واحدة وبالمثل (2000) بعد ثانيتين وهكذا.

(2)toggle effects:

هذة الدالة تقوم بعمل مهمة (hide,show) معا كالتالى:

<!DOCTYPE html>

<html>

<head>

<script src=” jquery-1.10.2.min.js “>

$(document).ready(function(){

$(“button”).click(function(){

$(“p”).toggle();

});

});

</script>

</head>

<body>

<button>Toggle</button>

<p>toggle effects can hide and show together.</p>

</body>

</html>

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: