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>

ضع تعليقك هنا