前端开发，如何使一个div平行移动
如题，我有一个宽度为300px的div，开始的时候隐藏不可见，我想要在点击一个按钮之后使这个div从右边出现，然后向左边平移，到达中间后停顿三秒，再继续向左平移直至消失。...
如题，我有一个宽度为300px的div，开始的时候隐藏不可见，我想要在点击一个按钮之后使这个div从右边出现，然后向左边平移，到达中间后停顿三秒，再继续向左平移直至消失。
我在网上查的transition都是宽度、高度的变化，小弟初学经验不足，有没有大神指点一下，谢谢 展开
我在网上查的transition都是宽度、高度的变化，小弟初学经验不足，有没有大神指点一下，谢谢 展开
展开全部
<!--写的比较粗糙。正常运行无bug。不过需要等待动画完成再点击btn,不然就出bug。希望能帮到你-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{width:300px;height: 300px;background:rgba(200,200,200,.5);position: absolute;left: 0;top: 50px;display: none;}
.show{display: block;}
</style>
</head>
<body>
<div class="box"></div>
<button>点击</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//点击触发
$('button').on('click',function(){
//初始化
if($('.box').css('opacity') ==0){
$('.box').removeClass('show').css({'left':'0','opacity':1});
console.log(1);
}
console.log($('.box').css('opacity'));
$(".box").addClass('show').animate({'left':'300px'},2000).delay(1000).animate({'left':'600px','opacity':0},2000);
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{width:300px;height: 300px;background:rgba(200,200,200,.5);position: absolute;left: 0;top: 50px;display: none;}
.show{display: block;}
</style>
</head>
<body>
<div class="box"></div>
<button>点击</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//点击触发
$('button').on('click',function(){
//初始化
if($('.box').css('opacity') ==0){
$('.box').removeClass('show').css({'left':'0','opacity':1});
console.log(1);
}
console.log($('.box').css('opacity'));
$(".box").addClass('show').animate({'left':'300px'},2000).delay(1000).animate({'left':'600px','opacity':0},2000);
})
})
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
