0
آموزش jquery قسمت یازدهم کار با انیمیشن Show و Hide
آموزش jquery قسمت یازدهم کار با انیمیشن Show و Hide
یکی از مهترین کاربردهای jquery ایجاد انیمیشن در صفحات وب است.
برای اعمال انیمیشن به عناصر انتخابی از show ، hide و toggle استفاده می شود این توابع چهار ورودی به صورت زیر دریافت می کنند.
Slow
انیمیشن را با سرعت آهسته نمایش می دهد
Normal
انیمیشن را با سرعت معمولی نمایش می دهد
Fast
انیمیشن را با سرعت سریع نمایش می دهد
عدد
یک عدد دریافت می کند و انیمیشن را با آن سرعت نمایش می دهد
در مثال های زیر ابتدا عنصر مورد نظر انتخاب کردیم و سپس بعد از کلیک روی آن ها تابع انیمیشن فراخوانی کردیم.
در این مثال تمامی حالت های نمایش انیمیشن نوشته شده تا بتوانید انیمیشن های مورد نظر را مشاهده کنید.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowSlow").click(function () {
$("#divAnimation").show("slow");
});
$("#btnShowNormal").click(function () {
$("#divAnimation").show("normal");
});
$("#btnShowFast").click(function () {
$("#divAnimation").show("fast");
});
$("#btnShowSpeed").click(function () {
$("#divAnimation").show(5000);
});
$("#btnHideSlow").click(function () {
$("#divAnimation").hide("slow");
});
$("#btnHideNormal").click(function () {
$("#divAnimation").hide("normal");
});
$("#btnHideFast").click(function () {
$("#divAnimation").hide("fast");
});
$("#btnHideSpeed").click(function () {
$("#divAnimation").hide(5000);
});
$("#btnToggleSlow").click(function () {
$("#divAnimation").toggle("slow");
});
$("#btnToggleNormal").click(function () {
$("#divAnimation").toggle("normal");
});
$("#btnToggleFast").click(function () {
$("#divAnimation").toggle("fast");
});
$("#btnToggleSpeed").click(function () {
$("#divAnimation").toggle(5000);
});
});
</script>
<style type="text/css">
#divAnimation {
background-color: blueviolet;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button id="btnShowSlow">show Slow</button>
<button id="btnShowNormal">show Normal</button>
<button id="btnShowFast">show Fast</button>
<button id="btnShowSpeed">show Speed</button>
<br />
<button id="btnHideSlow">hide Slow</button>
<button id="btnHideNormal">hide Normal</button>
<button id="btnHideFast">hide Fast</button>
<button id="btnHideSpeed">hide Speed</button>
<br />
<button id="btnToggleSlow">Toggle Slow</button>
<button id="btnToggleNormal">Toggle Normal</button>
<button id="btnToggleFast">Toggle Fast</button>
<button id="btnToggleSpeed">Toggle Speed</button>
<div id="divAnimation">Animation Jquery</div>
</body>
</html>
نوشتن تابع داخل توابع انیمیشن
اگر بخواهیم بعد از پایان انیمیشن کار خاصی انجام دهیم یا یک پیغام را به کاربر نمایش دهیم می توانیم داخل توابع انیمیشن تابع دیگر نیز به صورت زیر بنویسیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnShow").click(function () {
$("#divAnimation").show(5000, function () {
alert("Finished");
});
});
$("#btnHide").click(function () {
$("#divAnimation").hide();
});
});
</script>
<style type="text/css">
#divAnimation {
background-color: blueviolet;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button id="btnShow">show</button>
<button id="btnHide">hide</button>
<div id="divAnimation">Animation Jquery</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال