您的位置：首页 > Web前端 > JQuery

jquery.animate实现弹跳效果

2016-03-07 00:00 686 查看

HTML

<!DOCTYPE html>

<html>

<head>

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>JS Bin</title>

</head>

<body>

<div id='div'><a></a></div>

<div id="line"></div>

</body>

</html>

CSS

#div{

width:50px;

height:50px;

background-color:pink;

position:absolute;

top:50px;

left:100px;

border-radius:50%;

}

#line{

position:relative;

background-color:#ccc;

top:240px;

height:1px;

overflow:hidden;

}

JS

$('#div').mouseover(function(){

$('#div').animate({top:200},400,function(){

$('#div').animate({top:80},300,function(){

$('#div').animate({top:200},200,function(){

$('#div').animate({top:150},100,function(){

$('#div').animate({top:200},80,function(){

$('#div').animate({top:180},50,function(){

$('#div').animate({top:200},50);

});

});

});

});

});

});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： query.animate（）

相关文章推荐

新的分享

章节导航