demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4图片动画</title>
<style>
.data {
display: inline-block;
padding: 10px;
margin: 5px;
font-size: 20px;
}
.red {
margin-top: 50px;
width: 100%;
background-color: red;
}
.yellow {
margin-top: 70px;
width: 100%;
background-color: yellow;
}
.blue {
margin-top: 90px;
width: 100%;
background-color: blue;
}
.purple {
margin-top: 110px;
width: 100%;
background-color: purple;
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
var dataContainer = $('#data-container');
var data = dataContainer.find('.data');
var originalPosition = []; // 用于存储每一行的原始位置
var originalOpacity = []; // 用于存储每一行的原始透明度（用于动画结束后恢复）
// 初始化数据行位置和透明度
data.each(function (index) {
originalPosition[index] = $(this).position(); // 存储原始位置
originalOpacity[index] = $(this).css('opacity'); // 存储原始透明度（初始为1）
$(this).css('position', 'absolute'); // 设置为绝对定位，方便移动位置
});
var c = 0;
// 点击第二行（索引为1）时，第一行上升然后消失的动画效果
data.eq(1).click(function () {
if (c == 0) {
var firstRow = data.eq(0); // 第一行数据行元素
firstRow.animate({ top: '-=50' }, 500, function () { // 向上移动50px，持续500毫秒
// firstRow.remove(); // 移除第一行元素，使其消失
});
c = 1;
} else {
var firstRow = data.eq(0); // 第一行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 向上移动50px，持续500毫秒
// firstRow.remove(); // 移除第一行元素，使其消失
});
c = 0;
}
});
var b = 0;
// 点击第三行（索引为2）时，第一、二行上升然后消失的动画效果
data.eq(2).click(function () {
if (b == 0) {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
firstRow.animate({ top: '-=50' }, 500, function () { // 向上移动50px，持续500毫秒，然后移除元素使其消失
//firstRow.remove();
});
secondRow.animate({ top: '-=50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
b = 1;
} else {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 向上移动50px，持续500毫秒，然后移除元素使其消失
//firstRow.remove();
});
secondRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
b = 0;
}
});
var a = 0;
// 点击第四行（索引为3）时，第一、二、三行上升然后消失的动画效果
data.eq(3).click(function () {
if (a == 0) {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
var thirdRow = data.eq(2); // 第三行数据行元素
firstRow.animate({ top: '-=50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// firstRow.remove();
});
secondRow.animate({ top: '-=50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
thirdRow.animate({ top: '-=50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// thirdRow.remove();
});
a = 1;
} else {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
var thirdRow = data.eq(2); // 第三行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// firstRow.remove();
});
secondRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
thirdRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// thirdRow.remove();
});
a = 0;
}
});
// 点击数据外的任何地方时，所有消失的行下降显示出来，到最初的位置的动画效果（恢复原始状态）
$(document).click(function (event) { // 注意这里使用的是document而不是dataContainer，是为了保证点击数据外的任何地方都能触发这个效果，而不是只能点击dataContainer区域外的地方才能触发
if (!dataContainer.is(event.target) && dataContainer.has(event.target).length === 0) {
if (c==1) {
var firstRow = data.eq(0); // 第一行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 向上移动50px，持续500毫秒
// firstRow.remove(); // 移除第一行元素，使其消失
});
c = 0;
}
if (b==1) {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 向上移动50px，持续500毫秒，然后移除元素使其消失
//firstRow.remove();
});
secondRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
b = 0;
}
if (a==1) {
var firstRow = data.eq(0); // 第一行数据行元素
var secondRow = data.eq(1); // 第二行数据行元素
var thirdRow = data.eq(2); // 第三行数据行元素
firstRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// firstRow.remove();
});
secondRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// secondRow.remove();
});
thirdRow.animate({ top: '-=-50' }, 500, function () { // 同上，向上移动50px，持续500毫秒，然后移除元素使其消失
// thirdRow.remove();
});
a = 0;
}
//data.each(function (index) {
// var row = $(this);
// if (row.css('display') === 'none') { // 如果该行元素已被移除（即已消失）
// row.css('position', 'absolute'); // 恢复为绝对定位
// row.css('top', originalPosition[index].top); // 恢复原始位置
// row.css('opacity', originalOpacity[index]); // 恢复原始透明度
// row.show(); // 显示该行元素
// }
//});
}
});
});
</script>
</head>
<body>
<div id="data-container">
<div class="data red">1</div>
<br />
<div class="data yellow">2</div>
<br />
<div class="data blue">3</div>
<br />
<div class="data purple">4</div>
</div>
</body>
</html>