jQuery stop ( ) Method

Posted on Updated on

jQuery stop ( ) Method

The jQuery stop ( ) system is utilized to stop a movement or impact before it is done . The stop ( ) system works for all jQuery impact capacities, including sliding, blurring and custom movements .

Structure syntax :

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

The discretionary stopAll parameter determines whether likewise the liveliness line ought to be cleared or not . Default is false, which implies that just the dynamic movement will be quit, permitting any lined activitys to be performed a while later .

The discretionary goToEnd parameter indicates regardless of whether to finish the present activity quickly . Default is false . In this way, of course, the stop ( ) system executes the present movement being performed on the chose component .

The accompanying sample exhibits the stop ( ) system, without any parameters :

Example :-

$ ( “ #stop “ ) . click ( function ( ) {

    $ ( “ #panel “ ) . stop ( ) ;

} ) ;

< !DOCTYPE html >

< html >

< head >

< script src= “ https : //ajax . googleapis . com/ajax/libs/jquery/1 . 11 . 3/jquery . min . js “ > < / script>

< script >

$ ( document ) . ready ( function ( ) {

$ ( “ #flip “ ) . click ( function ( ) {

$ ( “ #panel “ ) . slideDown ( 5000 ) ;

} ) ;

$ ( “ #stop “ ) . click ( function ( ) {

$ ( “ #panel “ ) . stop ( ) ;

} ) ;

} ) ;

< / script >

< style >

#panel, #flip {

padding : 5px ;

font-size : 18px ;

text-align : center ;

background-color : #555 ;

color : white ;

border : solid 1px #666 ;

border-radius : 3px ;

}

#panel {

padding : 50px ;

display : none ;

}

< / style >

< / head >

< body >

< button id= “ stop “ > Stop sliding < / button >

< div id= “ flip “ > Click to slide down panel < / div >

< div id= “ panel “ > Hello world! < / div >

< / body >

< / html >

Another example :

< !doctype html >

< html lang = “ en “ >

< head >

< meta charset = “ utf-8 “ >

< title > stop demo < / title >

< style >

div {

position: absolute;

background-color: #abc;

left: 0px;

top: 30px;

width: 60px;

height: 60px;

margin: 5px;

}

< / style >

< script src = “ https:/ / code . jquery . com/ jquery-1 . 10 . 2 . js “

> < / script >

< / head >

< body >

< button id = “ go “ > Go < / button >

< button id = “ stop “ > STOP! < / button >

< button id = “ back “ > Back < / button >

< div class = “ block “ > < / div >

< script >

/ / Start animation

$ ( “ #go “ ) . click ( function ( ) {

$ ( “ . block “ ) . animate ( { left: “ + = 100px “ } , 2000 );

} ) ;

/ / Stop animation when button is clicked

$ ( “ #stop “ ) . click ( function ( ) {

$ ( “ . block “ ) . stop ( ) ;

} ) ;

/ / Start animation in the opposite direction

$ ( “ #back “ ) . click ( function ( ) {

$ ( “ . block “ ) . animate ( { left: “ – = 100px “ } , 2000 );

} ) ;

< / script >

< / body >

< / html >

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s