JQuery الدرس الرابع فى

jQuery Effects

الجزء الثالث

(4)Sliding effects:

وهى دالة تقوم بعمل تاثير انزلاق لجزء معين من صفحة الويب عند الضغط عليها ولها ثلاث انواع كالتالى:

Sliding type

الشرح

slideDown()

تقوم بعمل انزلاق لاسفل

slideUp()

تقوم بعمل انزلاق لاعلى

slideToggle()

تقوم بدمج الحالتين السابقتين معا

(a)slideDown effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div”).slideDown();

});

});

</script>

</head>

<body>

<button>Click to see slideDown effect</button>

<br><br>

<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>

</body>

</html>

(b)slideUp effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div”).slideUp();

});

});

</script>

</head>

<body>

<button>Click to see slideUp effect</button>

<br><br>

<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>

</body>

</html>

(c)slideToggle effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div”).slideToggle();

});

});

</script>

</head>

<body>

<button>Click to see slideToggle effect</button>

<br><br>

<div id=”div” style=”width:80px;height:80px;display:none;background-color:red;”></div><br>

</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: