<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>动画</title>
<style> * { margin: 0; padding: 0;
} .aa { position: absolute; top: 0; width: 200px; height: 200px; border: 1px solid red; z-index: 2; background: transparent;
} .aa:nth-child(1) { left: 0;
} .aa:nth-child(2) { left: 210px;
} .aa:nth-child(3) { left: 420px;
} .aa:nth-child(4) { left: 630px;
} .aa:nth-child(5) { left: 840px;
} .bj { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: #008000; transition: all 1s;
} .p { position: relative;
}
</style>
</head>
<body>
<div class="p">
<div class="aa"> 1 </div>
<div class="aa"> 2 </div>
<div class="aa"> 3 </div>
<div class="aa"> 4 </div>
<div class="aa"> 5 </div>
<div class="bj">
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"> $('.aa').click(function() { let index = $(this).index(); $('.bj').css('transform', 'translateX(' + $('.aa').eq(index).css('left') + ')'); }) </script>
</body>
</html>
