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

jQuery-第3节-jQuery动画、animate

2016-06-27 21:27 239 查看

1.隐藏和显示

hide()；隐藏 show()；显示
slideDown(), slideUp(): 只会改变元素的高度
fadeIn(), fadeOut(): 只改变元素的透明度
toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的. slideToggle(): 通过高度变化来切换匹配元素的可见性.
fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

2.自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate动画</title>
<script src="jquery.js"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
position: absolute;
background:#dda18f;
}
</style>
</head>
<body>
<button id="btn">演示</button>
<div id="content"></div>
<script>
$(function(){
$("#btn").click(function(){
$("#content").animate({"left":"1000"},800)
.animate({"left":"10"},800)
.animate({"top":"500"},800)
.animate({"top":"100"},800)
.animate({"width":"50"},500)
.animate({"height":"50"},500)
.animate({"opacity":"0"},800,function(){
$("#content").slideUp(500);
});
});
});
</script>
</body>
</html>

3.CSS3动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画</title>
<script src="jquery.js"></script>
<style type="text/css">
.animated {
-webkit-animation-duration: 5s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
/*设定动画执行事件*/
animation-duration: 5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.animated.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}

.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
div{
width: 100px;
height: 100px;
background: #6eb3d8;
}
</style>
</head>
<body>
<button>swing</button>
<div class="animated" id="content"></div>
<script>
$(function(){
$("button").click(function(){
var className = $(this).text().toLowerCase();
$('#content').addClass(className);
setTimeout(function(){
$('#content').removeClass(className);
},5000);
});
});
</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航