0
0
0
آموزش jquery قسمت دوازدهم کار با Animation Fade
آموزش jquery قسمت دوازدهم کار با Animation Fade
در پست های قبلی Animation Show and Hide را توضیح دادیم و در ادامه این آموزش به انیمیشن های FadeIn و FadeOut و FadeTo می پردازیم.
FadeIn : برای ظاهر کردن
FadeOut : برای پنهان کردن
FadeTo : از یک مقداری مانند slow شروع شده و به یک مقدار عددی (0 تا 1) خطم می شود.
این توابع انیمیشن چهار ورودی به صورت زیر دریافت می کنند.
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 () {
$("#btnFadeInSlow").click(function () {
$("#divAnimation").fadeIn("slow");
});
$("#btnFadeInNormal").click(function () {
$("#divAnimation").fadeIn("normal");
});
$("#btnFadeInFast").click(function () {
$("#divAnimation").fadeIn("fast");
});
$("#btnFadeInSpeed").click(function () {
$("#divAnimation").fadeIn(5000);
});
$("#btnFadeOutSlow").click(function () {
$("#divAnimation").fadeOut("slow");
});
$("#btnFadeOutNormal").click(function () {
$("#divAnimation").fadeOut("normal");
});
$("#btnFadeOutFast").click(function () {
$("#divAnimation").fadeOut("fast");
});
$("#btnFadeOutSpeed").click(function () {
$("#divAnimation").fadeOut(5000);
});
$("#btnFadeToSlow").click(function () {
$("#divAnimation").fadeTo("slow", 0.3);
});
$("#btnFadeToNormal").click(function () {
$("#divAnimation").fadeTo("normal", 0.3);
});
$("#btnFadeToFast").click(function () {
$("#divAnimation").fadeTo("fast", 1.0);
});
$("#btnFadeToSpeed").click(function () {
$("#divAnimation").fadeTo(5000, 1.0);
});
});
</script>
<style type="text/css">
#divAnimation {
background-color: blueviolet;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<button id="btnFadeInSlow">FadeIn Slow</button>
<button id="btnFadeInNormal">FadeIn Normal</button>
<button id="btnFadeInFast">FadeIn Fast</button>
<button id="btnFadeInSpeed">FadeIn Speed</button>
<br />
<button id="btnFadeOutSlow">FadeOut Slow</button>
<button id="btnFadeOutNormal">FadeOut Normal</button>
<button id="btnFadeOutFast">FadeOut Fast</button>
<button id="btnFadeOutSpeed">FadeOut Speed</button>
<br />
<button id="btnFadeToSlow">FadeTo 0.3</button>
<button id="btnFadeToNormal">FadeTo 0.3</button>
<button id="btnFadeToFast">FadeTo 1.0</button>
<button id="btnFadeToSpeed">FadeTo 1.0</button>
<div id="divAnimation">Animation Jquery</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال