JQ擴展 animate其餘運動形式，實現彈性運動效果
jq中animate其餘運動形式的擴展 css
http://blog.csdn.net/Della_UI/article/details/53242213html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 0;
background-color: red;
}
#btn1{
position: absolute;
left: 200px;
top: 0;
}
</style>
</head>
<body>
<!--
jq中animate其餘運動形式的擴展
http://blog.csdn.net/Della_UI/article/details/53242213
-->
<div id="div1">demo演示</div>
<input id="btn1" type="button" value="點擊"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.extend(jQuery.easing, {
easeIn: function(x, t, b, c, d) { //加速曲線
return c * (t /= d) * t + b;
},
easeOut: function(x, t, b, c, d) { //減速曲線
return -c * (t /= d) * (t - 2) + b;
},
easeBoth: function(x, t, b, c, d) { //加速減速曲線
if((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInStrong: function(x, t, b, c, d) { //加加速曲線
return c * (t /= d) * t * t * t + b;
},
easeOutStrong: function(x, t, b, c, d) { //減減速曲線
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function(x, t, b, c, d) { //加加速減減速曲線
if((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
elasticIn: function(x, t, b, c, d, a, p) { //正弦衰減曲線（彈動漸入）
if(t === 0) {
return b;
}
if((t /= d) == 1) {
return b + c;
}
if(!p) {
p = d * 0.3;
}
if(!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
elasticOut: function(x, t, b, c, d, a, p) { //正弦加強曲線（彈動漸出）
if(t === 0) {
return b;
}
if((t /= d) == 1) {
return b + c;
}
if(!p) {
p = d * 0.3;
}
if(!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
elasticBoth: function(x, t, b, c, d, a, p) {
if(t === 0) {
return b;
}
if((t /= d / 2) == 2) {
return b + c;
}
if(!p) {
p = d * (0.3 * 1.5);
}
if(!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if(t < 1) {
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return a * Math.pow(2, -10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
},
backIn: function(x, t, b, c, d, s) { //回退加速（回退漸入）
if(typeof s == 'undefined') {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
backOut: function(x, t, b, c, d, s) {
if(typeof s == 'undefined') {
s = 3.70158; //回縮的距離
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
backBoth: function(x, t, b, c, d, s) {
if(typeof s == 'undefined') {
s = 1.70158;
}
if((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
bounceIn: function(x, t, b, c, d) { //彈球減振（彈球漸出）
return c - this['bounceOut'](x, d - t, 0, c, d) + b;
},
bounceOut: function(x, t, b, c, d) {
if((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if(t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
} else if(t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
}
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
},
bounceBoth: function(x, t, b, c, d) {
if(t < d / 2) {
return this['bounceIn'](x, t * 2, 0, c, d) * 0.5 + b;
}
return this['bounceOut'](x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
});
$(function() {
$("#btn1").on('click',function(){
$('#div1').animate({
height: 100
}, 1000, 'bounceOut');
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 0;
background-color: red;
}
#btn1 {
position: absolute;
left: 200px;
top: 0;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
display: block;
text-decoration: none;
}
.nav-item {
width: 200px;
}
.nav-item-a {
width: 200px;
text-align: center;
line-height: 20px;
background: #000;
color: #fff;
}
.nav-item-ul {
height: 0;
overflow: hidden;
}
.nav-item-ul>li>a {
width: 200px;
background: #d8aaaa;
color: #66518e;
text-align: center;
line-height: 40px;
}
.nav-item-ul {
width: 200px;
background: rgba(111, 76, 76, 0.24);
}
.nav-item-ul>li {}
.nav-item-ul>li+li {
margin-top: 10px;
}
</style>
</head>
<body>
<!--
jq中animate其餘運動形式的擴展
http://blog.csdn.net/Della_UI/article/details/53242213
-->
<ul class="nav">
<li class="nav-item">
<a class="nav-item-a" href="#">菜單1</a>
<ul class="nav-item-ul">
<li>
<a href="#">菜單1-1</a>
</li>
<li>
<a href="#">菜單1-2</a>
</li>
<li>
<a href="#">菜單1-3</a>
</li>
<li>
<a href="#">菜單1-4</a>
</li>
<li>
<a href="#">菜單1-5</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-item-a" href="#">菜單2</a>
<ul class="nav-item-ul">
<li>
<a href="#">菜單2-1</a>
</li>
<li>
<a href="#">菜單2-2</a>
</li>
<li>
<a href="#">菜單2-3</a>
</li>
<li>
<a href="#">菜單2-4</a>
</li>
<li>
<a href="#">菜單2-5</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-item-a" href="#">菜單3</a>
<ul class="nav-item-ul">
<li>
<a href="#">菜單3-1</a>
</li>
<li>
<a href="#">菜單3-2</a>
</li>
<li>
<a href="#">菜單3-3</a>
</li>
<li>
<a href="#">菜單3-4</a>
</li>
<li>
<a href="#">菜單3-5</a>
</li>
</ul>
</li>
</ul>
<input id="btn1" type="button" value="點擊" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/animate.js"></script>
<script>
$(function() {
$(".nav-item-a").on('click', function(e) {
$(this).parent().siblings().find('.nav-item-ul').css({
height: 0,
overflow: 'hidden'
})
$(this).next('.nav-item-ul').animate({
height: 240
}, 400, 'bounceOut'); //bounceOut elasticOut
});
});
</script>
</body>
</html>
相關文章
- 1. jq運動 以及css動畫 .animate()
- 2. jq-animate實現返回頂部效果
- 3. JQ實現彈幕效果
- 4. css、jq實現移動（動畫）效果
- 5. animate 實現滑動切換效果
- 6. css3效果：animate實現點點點loading動畫效果（二）
- 7. CSS3效果：animate實現點點點loading動畫效果（二）
- 8. jQuery animate()動畫效果
- 9. CSS3效果：animate實現點點點loading動畫效果（一）
- 10. css3效果： animate實現點點點loading動畫效果（一）
- 更多相關文章...
- • 其他 W3C 活動 - W3C 教程
- • Swift 擴展 - Swift 教程
- • 算法總結-滑動窗口
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
