افکت ها در jQuery - افکت stop
افکت ( ) stop در jQuery :
به کار بردن این افکت باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود
. برای مثال فرض کنید که یک تگ Div دارید که می خواهید ارتفاع آن را از 100 به 500
پیکسل افزایش دهید . انجام این کار چند ثانیه طول می کشد . می توانید دکمه فرمانی قرار
دهید تا با اجرای افکت ( ) stop انجام انیمیشن فوق را برای تگ Div ، مثلا
در وسط فرایند متوقف سازد .
شکل کلی استفاده از این افکت بصورت زیر است :
|
Syntax
|
$( selector ).stop( stopAll , goToEnd ) ;
|
توضیح هر یک از موارد syntax :
|
توضیح
|
|
selector تعیین کننده id عنصری است که می خواهیم اجرای یک افکت بر روی آن با متد (
) stop متوقف شود .
|
این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن
false است ولی اگر روی true تنظیم شود، در هنگام اجرای افکت stop ، کلیه انیمیشن های
مرتبط با این افکت را به صورت یکباره متوقف می سازد .
استفاده از این پارامتر اختیاری است .
|
این پارامتر یک مقدار Boolean را تعیین می کند . مقدار پیش فرض آن false است
ولی اگر روی true تنظیم شود ، در هنگام اجرای افکت stop ،انیمیشن های مرتبط با آن را
به یکباره متوقف کرده و به مرحله آخر می رساند .
استفاده از این پارامتر اختیاری است .
|
مثال عملی :
مثال 1 : توقف اجرای افکت در وسط پروسه : در مثال زیر یک افکت ( )
animate ، ارتفاع تگ div را افزایش می دهد . با کلیک بر روی دکمه فرمان stop می توانید
انجام این عملیات را در وسط پروسه ، متوقف نمایید :
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
var div1 = $("#div1");
$("#start1").click(function(){
div1.animate({height:300},"slow");
div1.animate({width:300},"slow");
div1.animate({height:100},"slow");
div1.animate({width:100},"slow");
});
$("#stop1").click(function(){
div1.stop(true);
});
});
</script>;
</head>
<body>
<p>
<button id="start1">
Start </button>
<button id="stop1">
Stop </button>
</p>
<div id ="div1" style="background: #9(
) stopbf21; height: 100px; width: 100px"> </div>
</body>
</html>
|
|
|
مثال 2 : توقف و اتمام یکباره افکت در حال اجرا : در مثال زیر یک
افکت ( ) animate ، ارتفاع تگ div را افزایش می دهد . با کلیک بر روی دکمه فرمان stop
می توانید انجام این عملیات را در وسط پروسه ، متوقف کرده و به یکباره به انتهای آن
برسانید :
< html >
< head >
< script type="text/javascript" src="jquery.js"
> < /script >
< script type="text/javascript" >
$ (document). ready ( function(
) {
var div2 = $("#div2");
$("#start2").click(function(){
div2.animate({height:300},"slow");
div2.animate({width:300},"slow");
div2.animate({height:100},"slow");
div2.animate({width:100},"slow");
});
$("#stop2").click(function(){
div2.stop(true,true);
});
});
</script>;
</head>
<body>
<p>
<button id="start2">
Start </button>
<button id="stop2">
Stop </button>
</p>
<div id ="div2" style="background:
#9( ) stopbf21; height: 100px; width: 100px"> </div>
</body>
</html>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :