jQuery الدرس الثالث فى

jQuery Effects

الجزء الثانى

(3)Fading effects:

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

Fading type

الشرح

fadeIn()

تقوم باظهار كود معين بصورة تدريجية

fadeOut()

تقوم باخفاء كود معين بصورة تدريجية

fadeToggle()

تقوم بعمليتى الاظهار والاخفاء معا

fadeTo()

تتحكم فى درجة الشفافية او اللون لكود معين فى الصفحة

(a)fadeIn effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

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

});

});

</script>

</head>

<body>

<button>Click to see fade in effect</button>

<br><br>

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

</body>

</html>

ويمكن استخدام بارمتر مع هذة الدالة لتحديد سرعة الظهور وهما ثلاث انواع (slow,fast) او النوع الثالث عن طريق الثوانى والتى تم شرحها بالدرس السابق كالتالى:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div1”).fadeIn(“slow”);

$(“#div2”).fadeIn(3000);

});

});

</script>

</head>

<body>

<button>Click to see fade in effect</button>

<br><br>

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

<div id=”div2″ style=”width:70px;height:70px;display:none;background-color:blue;”></div><br>

</body>

</html>

(b)fadeOut effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div1”).fadeOut();

$(“#div2”).fadeOut(“slow”);

$(“#div3”).fadeOut(3000);

});

});

</script>

</head>

<body>

<button>Click to see fade out effect</button>

<br><br>

<div id=”div1″ style=”width:70px;height:70px;background-color:green;”></div><br>

<div id=”div2″ style=”width:70px;height:70px;background-color:red;”></div><br>

<div id=”div3″ style=”width:70px;height:70px;background-color:blue;”></div>

</body>

</html>

(c)fadeOut effects:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div1”).fadeToggle();

$(“#div2”).fadeToggle(“slow”);

$(“#div3”).fadeToggle(3000);

});

});

</script>

</head>

<body>

<button>Click to see fade in/out effect</button>

<br><br>

<div id=”div1″ style=”width:70px;height:70px;background-color:red;”></div>

<br>

<div id=”div2″ style=”width:70px;height:70px;background-color:green;”></div>

<br>

<div id=”div3″ style=”width:70px;height:70px;background-color:blue;”></div>

</body>

</html>

(d)fadeTo effects:

وهذة الدالة تاخذ بارمترين الاول عبارة عن تحديد سرعة الظهور (slow,fast,millisecond) والثانى عبارة عن تحديد درجة الشفافية للون والتى يكون قيمتها محصورة بين (0,1) كالتالى:

مثال:

<!DOCTYPE html>

<html>

<head>

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

$(document).ready(function(){

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

$(“#div1”).fadeTo(“slow”,0.25);

$(“#div2”).fadeTo(“slow”,0.3);

});

});

</script>

</head>

<body>

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

<br><br>

<div id=”div1″ style=”width:70px;height:70px;background-color:blue;”></div><br>

<div id=”div2″ style=”width:70px;height:70px;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: