متد stop در جی کوئری

هدایت عباسی آموزش جی کوئری

آمورش ویدئویی دستور stop

دانلود فیلم و آموزش ویدئویی دستور stop در جی کوئری. در این فیلم با این دستور و نحوه کار با آن آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

متد stop در جی کوئری (jquery) برای متوقف کردن انیمیشن ها و یا جلوه ها قبل از به پایان رسیدن آنها استفاده می شود. با ذکر چند مثال با کاربرد متد stop آشنا خواهید شد. کدها همه تست شده میباشد.

سینتکس متد stop

در این بخش از آموزش جی کوئری از تاپ سایت 98 به سراغ متد stop می رویم.

در زیر سینتکس متد stop را مشاهده می کنید.

هر دو گزینه داخل پرانتز اختیاری میباشد .

$(selector).stop(stopAll,goToEnd);

مثال متد stop

در مثال متد stop ابتدا با استفاده از css دو باکس ایجاد کرده ایم که یکی برای click و دیگری برای متن Topsite98 می باشد.

با کلیک روی دکمه کلیک ، یک اسلاید به طرف پایین باز می شود.

با کلیک روی دکمه بالایی که روی آن گزینه Stop نوشته شده است متد stop اجرا شده و اسلاید در همان قسمت می ایستد و به طرف پایین حرکت نمی کند.

مدت زمان باز شدن کامل اسلاید 5 ثانیه میباشد. اگر مثلا در مدت 2 ثانیه روی دکمه بالایی کلیک کنید اسلاید در همان جا متوقف می شود.

کد زیر را می توانید در یک فایل html ذخیره و تست نمایید.

حتما فایل jquery.js را در کنار فایل قرار دهید وگرنه کد اجرا نخواهد شد.

<!DOCTYPE html>
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("#f").click(function(){
$("#p").slideDown(5000);
});
$("#stop").click(function(){
$("#p").stop();
});
});
</script>
<style>
#p, #f {
background-color: dimgray;
color: white;
border: solid 1px #333;
padding: 4px;
font-size: 20px;
text-align: center;
}
#p {
padding: 50px;display: none;
}
#stop{
width: 300px;
padding: 20px 0;
}
</style>
</head>
<body>
<button id="stop">Stop</button>
<div id="f">Click me</div>
<div id="p">Topsite98</div>
</body>
</html>

کاربرد متد stop

حال به سراغ کاربرد متد stop بصورت دیگر می رویم.

در مثال زیر ما دو انیمیشن را برای باکس در نظر گرفته ایم.

در حالت اول ارتفاع بیشتر می شود و در حالت دوم عرض بیشتر خواهد شد.

با هر stop یک عمل متوقف میشود.

هنگامی که ارتفاع در حالت افزایش میباشد روی دکمه stop کلیک کنید تا افزایش ارتفاع متوقف شود.

اما انیمیشن دوم شروع به کار می کند با کلیک روی دکمه stop انیمیشن دوم متوقف میشود.

<!DOCTYPE html>
<html>
<head>
<style>
#aa{
background:#98bf21;
height:100px;width:100px;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height: 300}, 4000);
$("div").animate({width: 300}, 4000);
});
$("#stop").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<p>
<button id="start">Start Animation</button>
<button id="stop">Stop Current Animation</button>
</p>
<div id="aa"></div>
</body>
</html>

کدها همه تست شده است. می توانید آنها را در فایل html ذخیره کنید و تست نمایید.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید