JQUERY实例代码—队列

代码

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 队列 </ title >
< style type = " text/css " >
div
{
margin: 3px;
width: 40px;
height: 40px;
background: green;
display:none;
}
div.newcolor
{
background: blue;
}
</ style >
< script type = " text/javascript " src = " ../JS/jquery-1.4.2.js " ></ script >
< script type = " text/javascript " >
$(document).ready(function () {
$( " #queue " ).click(function () {
$( " div " ).show( " slow " );
$( " div " ).animate({ left: ' +=200 ' }, 2000 );
$( " div " ).queue(function () {
$( this ).addClass( " newcolor " );
$( this ).dequeue();
});
$( " div " ).animate({ left: ' -=200 ' }, 500 );
$( " div " ).queue(function () {
$( this ).removeClass( " newcolor " );
$( this ).dequeue();
});
$( " div " ).slideUp();
});

$( " #start " ).click(function () {
$( " div " ).show( " slow " );
$( " div " ).animate({ left: ' +=200 ' }, 5000 );
$( " div " ).queue(function () {
$( this ).addClass( " newcolor " );
$( this ).dequeue();
});
$( " div " ).animate({ left: ' -=200 ' }, 1500 );
$( " div " ).queue(function () {
$( this ).removeClass( " newcolor " );
$( this ).dequeue();
});
$( " div " ).slideUp();
});

$( " #stop " ).click(function () {
$( " div " ).queue( " fx " , []);
$( " div " ).stop();
});
})

</ script >
</ head >
< body >
< button id = " queue " > Click here... </ button >
< button id = " start " > Start </ button >
< button id = " stop " > Stop </ button >
< div >
</ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/dalonghahaha/archive/2010/08/13/1798688.html