如何用jquery控制div依次执行动画

知识严重匮乏 发布于 2015/06/30 13:37
阅读 2K+
收藏 0

如何用jquery控制div依次显示里面的动画呢!

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	body{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}
	#container{
		width: 960px;
		margin: 10em auto;
	}
	#container .content{
		width: 25%;
		height: 200px;
		float: left;
		text-align: center;
		padding:10px;
		margin: 10px;
		background: #abcdef;
		border: 1px solid #000;
		-webkit-animation-name: card-in;
		-webkit-animation-duration: .5s;
		animation-name: card-in;
		animation-duration: .5s;
	}
	@-webkit-keyframes card-in {
		from {
			opacity: 0;
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}
		to {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
	@keyframes card-in {
		from {
			opacity: 0;
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}
		to {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
</style>
<body>
	<div id="container">
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
	</div>

</body>
</html>



加载中
0
省委书记沙瑞金
省委书记沙瑞金

可以依次添加css来进行控制

知识严重匮乏
回复 @曹思源 : 比如说呢,刚开始学习这个求指教!
省委书记沙瑞金
省委书记沙瑞金
@知识严重匮乏 定时给每个div添加css
知识严重匮乏
用css控制?求解
0
NENER
NENER
使用动画队列
0
oxsicn
oxsicn
#container .content{
        width: 25%;
        height: 200px;
        float: left;
        text-align: center;
        padding:10px;
        margin: 10px;
        background: #abcdef;
        border: 1px solid #000;
    }
#container .content.start{
        -webkit-animation-name: card-in;
        -webkit-animation-duration: .5s;
        animation-name: card-in;
        animation-duration: .5s;
}


$(function(){
	var $content = $('.content');
	for (var i = 0; i < $content.length; i++) {
		(function($this,i){
			setTimeout(function(){
				$this.addClass('start');
			},i*100)
		})($($content[i]),i)
	};
})



oxsicn
oxsicn
回复 @知识严重匮乏 : 选为最佳答案 谢谢
知识严重匮乏
就是这个 谢谢!
返回顶部
顶部