JavaWeb/MJavaWeb/WebContent/JQuery/Right_LeftTest.html at master · Paperplanes77/JavaWeb · GitHub

24 lines (24 loc) · 641 Bytes

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>向右移动后再向左移动回来</title>

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

</head>

<body>

<div style="position:relative;width:24px;height: 32px;border: 1px solid red;"></div>

<button type="button">向右</button>

<script type="text/javascript">

$('button').bind('click',function(){

$('div').animate({

left:'+=100px'

//添加第三个参数的回调函数位置相对左边界

},3000,function(){

$('div').animate({

left:'-=100px'

},3000)

});

});

</script>

</body>

</html>