متد delay در جی کوئری
در این قسمت با متد delay در جی کوئری آشنا می شوید. برای یادگیری بهتر چندین مثال ارائه خواهیم داد. کافی است کدها را در یک فایل html ذخیره کرده و اجرا نمایید تا نتیجه را مشاهده فرمایید. پس با ما باشید.
کاربرد متد delay
در این بخش از آموزش جاوا اسکریپت و جی کوئری از تاپ سایت 98 با کاربرد متد delay آشنا می شوید.
متد delay جهت انداختن تاخیر بکار می رود.
بعضی مواقع نیاز است چندین دستور به ترتیب اجرا شوند در این صورت متد delay بسیار کاربردی است.
مثال متد delay
در بخش زیر یک مثال متد delay ارائه کرده ایم تا شما به صورت عملی با این دستور آشنا شوید.
ابتدا چند باکس ایجاد کرده ایم که پس از اجرای کد زیر ، مشاهده خواهید کرد.
سپس یک دکمه یا تگ button را مشاهده می کنید با کلیک روی این دکمه ، باکس ها به ترتیب و با تاخیر مخفی می شوند.
برای مخفی کردن آنها نیز از دستور fadeout استفاده کرده ایم.
باکس اول با تاخیر کمتر از یک ثانیه مخفی می شود. باکس دوم با تاخیر یک دقیقه ای و باکس سوم با تاخیر 2 و نیم دقیقه ای مخفی می شود.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div3").delay(300).fadeOut();
$("#div4").delay(1000).fadeOut();
$("#div5").delay(2500).fadeOut();
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<p>delay() method</p>
<button>Click delay</button>
<br><br>
<div id="div3" style="width:90px; height:90px;background-color:blue; "></div><br>
<div id="div4" style="width:90px;height:90px;background-color:red; "></div><br>
<div id="div5" style="width:90px;height:90px; background-color:purple;"></div><br>
</body>
</html>
در مثال زیر بجای استفاده از عدد از fast و slow استفاده کرده ایم.
حالت fast سریع باکس را مخفی می کند و حالت slow کند باکس را مخفی می کند.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2").delay("fast").fadeOut();
$("p").delay("slow").fadeOut();
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button>Click me</button>
<h2>topsite98</h2>
<p>delay</p>
</body>
</html>
انیمیشن و متد delay
در قسمت زیر با انیمیشن و متد delay آشنا می شوید.
برای ایجاد انیمیشن از دستور animate استفاده می کنیم. در اینجا ابتدا یک باکس ایجاد کرده ایم.
سپس با دستور animate عرض را تغییر می دهیم. در انتها نیز با یک تاخیر ارتفاع را تغییر سایز می دهیم.
هر 3 مثال تست شده میباشد. کافی است آنها را در یک فایل با پسوند html ذخیره کنید و سپس اجرا نمایید.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bt").click(function(){
$("div").animate({height: "150px"});
$("div").animate({width: "150px"});
$("div").delay(500).animate({height: "300px"});
});
});
</script>
</head>
<body>
<h1>Topsite98.com</h1>
<div style="background:darkolivegreen; height:50px;width:50px;margin:8px;"></div>
<p><button id="bt">Animate</button></p>
</body>
</html>
امیدواریم از این آموزش لذت برده باشید.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید