Copy codeThe Code is as follows:
<Head>
<Title> </title>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Style type = "text/css">
Img
{
Width: 150px;
Height: 200px;
Position: relative;
}
Td {width: 150px; height: 200px ;}
Table {border: solid 1px black ;}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ('Img '). click (function (){
$ (This ). animations ({left: '+ = 150px'}, 2000 ). animations ({left: '+ = 150px'}, 2000 ). animate ({top: '+ = 200px'}, 2000 ). animations ({left: '-= 150px'}, 2000 ). animations ({left: '-= 150px'}, 2000 ). animate ({top: '+ = 200px'}, 2000 ). animations ({left: '+ = 150px'}, 2000 ). animate ({left: '+ = 150px'}, 2000 );
})
// Stop the animation. When an element has an animation queue, the animation is stopped and the next animation is executed.
$ ('# Btnstop'). click (function (){
$ ('Img '). stop ();
})
$ ('# BtnYanChi'). click (function (){
$ ('Img '). delay (2000). hide (2000 );
})
})
</Script>
</Head>
<Body>
<Table>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
</Td>
<Td>
</Td>
</Tr>
</Table>
<Input id = "btnStop" type = "button" value = "stop"/>
<Input id = "btnYanChi" type = "button" value = "delayed execution"/>
</Body>