تبلیغات متنی و بنر

افکت ها در jQuery - افکت stop

افکت ( ) stop در jQuery :

به کار بردن این افکت باعث توقف انجام یک عمل یا انیمیشن برای عنصر مورد نظر می شود . برای مثال فرض کنید که یک تگ Div دارید که می خواهید ارتفاع آن را از 100 به 500 پیکسل افزایش دهید . انجام این کار چند ثانیه طول می کشد . می توانید دکمه فرمانی قرار دهید تا با اجرای افکت  ( ) stop  انجام انیمیشن فوق را برای تگ Div ، مثلا در وسط فرایند متوقف سازد .
شکل کلی استفاده از این افکت بصورت زیر است :

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

توضیح هر یک از موارد syntax :

syntax توضیح
توضیح Parameter
selector تعیین کننده id عنصری است که می خواهیم اجرای یک افکت بر روی آن با متد ( ) stop متوقف شود . selector
این پارامتر یک مقدار  Boolean  را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود، در هنگام اجرای افکت stop ، کلیه انیمیشن های مرتبط با این افکت را به صورت یکباره متوقف می سازد .
استفاده از این پارامتر اختیاری است . 		stopAll
این پارامتر یک مقدار Boolean  را تعیین می کند . مقدار پیش فرض آن false است ولی اگر روی true تنظیم شود ، در هنگام اجرای افکت stop ،انیمیشن های مرتبط با آن را به یکباره متوقف کرده و به مرحله آخر می رساند .
استفاده از این پارامتر اختیاری است . 		goToEnd

مثال عملی :

مثال 1 : توقف اجرای افکت در وسط پروسه : در مثال زیر یک افکت ( ) animate ، ارتفاع تگ div را افزایش می دهد . با کلیک بر روی دکمه فرمان stop می توانید انجام این عملیات را در وسط پروسه ، متوقف نمایید :

Example
< 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 می توانید انجام این عملیات را در وسط پروسه ، متوقف کرده و به یکباره به انتهای آن برسانید :

Example
< 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> 		کد

خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟