0
0
0
آموزش jquery قسمت سیزدهم کار با Animation Slide
آموزش jquery قسمت سیزدهم کار با Animation Slide
در این پست در ادامه آموزش ایجاد انیمیشن با jquery به انیمیشن های slideUp و slideDown و slideToggle می پردازیم.
SlideUp : عنصر انتخابی را از پایین به بالا مخفی می کند
SlideDown : عنصر انتخابی را از بالا به پایین نمایش می دهد
SlideToggle : دو عمل بالا را به تنهای انجام می دهد.
این توابع انیمیشن چهار ورودی به صورت زیر دریافت می کنند.
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 () {
$("#btnslideUpSlow").click(function () {
$("#divAnimation").slideUp("slow");
});
$("#btnslideUpNormal").click(function () {
$("#divAnimation").slideUp("normal");
});
$("#btnslideUpFast").click(function () {
$("#divAnimation").slideUp("fast");
});
$("#btnslideUpSpeed").click(function () {
$("#divAnimation").slideUp(5000);
});
$("#btnslideDownSlow").click(function () {
$("#divAnimation").slideDown("slow");
});
$("#btnslideDownNormal").click(function () {
$("#divAnimation").slideDown("normal");
});
$("#btnslideDownFast").click(function () {
$("#divAnimation").slideDown("fast");
});
$("#btnslideDownSpeed").click(function () {
$("#divAnimation").slideDown(5000);
});
$("#btnslideToggleSlow").click(function () {
$("#divAnimation").slideToggle("slow");
});
$("#btnslideToggleNormal").click(function () {
$("#divAnimation").slideToggle("normal");
});
$("#btnslideToggleFast").click(function () {
$("#divAnimation").slideToggle("fast");
});
$("#btnslideToggleSpeed").click(function () {
$("#divAnimation").slideToggle(5000);
});
});
</script>
<style type="text/css">
#divAnimation {
background-color: blueviolet;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button id="btnslideUpSlow">slideUp Slow</button>
<button id="btnslideUpNormal">slideUp Normal</button>
<button id="btnslideUpFast">slideUp Fast</button>
<button id="btnslideUpSpeed">slideUp Speed</button>
<br />
<button id="btnslideDownSlow">slideDown Slow</button>
<button id="btnslideDownNormal">slideDown Normal</button>
<button id="btnslideDownFast">slideDown Fast</button>
<button id="btnslideDownSpeed">slideDown Speed</button>
<br />
<button id="btnslideToggleSlow">slideToggle Slow</button>
<button id="btnslideToggleNormal">slideToggle Normal</button>
<button id="btnslideToggleFast">slideToggle Fast</button>
<button id="btnslideToggleSpeed">slideToggle 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 () {
$("#btnSlideUp").click(function () {
$("#divAnimation").slideUp(5000, function () {
alert("Finished");
});
});
$("#btnSlideDown").click(function () {
$("#divAnimation").slideDown();
});
});
</script>
<style type="text/css">
#divAnimation {
background-color: blueviolet;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button id="btnSlideUp">SlideUp</button>
<button id="btnSlideDown">SlideDown</button>
<div id="divAnimation">Animation Jquery</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال