假设我有这样的代码：
function hide(num){
$("#text" + num).fadeOut();
}
function show(num){
$("#text" + num).fadeIn();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button onclick="show(1)">
Show text 1
</button>
<button onclick="show(2)">
Show text 2
</button>
<button onclick="hide(1)">
Hide text 1
</button>
<button onclick="hide(2)">
Hide text 2
</button>
<p id="text1">
Text1
</p>
<p id="text2">
Text2
</p>当你点击"隐藏文本1"时，文本1会平滑地消失，但文本2会自动传送到它的位置。有没有办法让这种"传送"更像一张幻灯片？
我知道我可以在JS中动画化每一个可能的移动，但当你自动生成很多元素时，这真的很烦人。有没有办法为所有这些自动传送做到这一点？
是的，您可以使用jQuery中的animate()函数来完成
这是您的代码：
function hide(num){
$("#text" + num).fadeOut();
if(num == 1) {
$("#text2").animate({
top: "25px"
}, 500, function() {
});
}
if(num == 2) {
$("#text1").animate({
top: "25px"
}, 500, function() {
});
}
}
function show(num){
$("#text" + num).fadeIn();
if(num == 1) {
$("#text2").animate({
top: "100px"
}, 500, function() {
});
}
if(num == 2) {
$("#text1").animate({
top: "25px"
}, 500, function() {
});
}
}p {
position: absolute;
}
#text2 {
top: 100px;
}
#text1 {
top: 25px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<button id="button1" onclick="show(1)">
Show text 1
</button>
<button id="button2" onclick="show(2)">
Show text 2
</button>
<button id="button3" onclick="hide(1)">
Hide text 1
</button>
<button id="button4" onclick="hide(2)">
Hide text 2
</button>
<p id="text1">
Text1
</p>
<br>
<p id="text2">
Text2
</p>
</body>
</html>这是一个现场演示：https://codepen.io/marchmello/pen/rNOBLzL
您可以使用slideToggle和animate的组合。slideToggle处理元素的显示和高度，而animate处理不透明度。你可能不需要更改opacity，所以你可以去掉它。如果所有元素都是动态生成的，这将处理它们。
function hide(num) {
var elem = $("#text" + num);
if (elem.css('display') == 'block') {
elem.animate({
'opacity': 0
});
elem.slideToggle();
}
}
function show(num) {
var elem = $("#text" + num);
if (elem.css('display') == 'none') {
elem.slideToggle();
elem.animate({
'opacity': 1
});
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="show(1)">
Show text 1
</button>
<button onclick="show(2)">
Show text 2
</button>
<button onclick="hide(1)">
Hide text 1
</button>
<button onclick="hide(2)">
Hide text 2
</button>
<p id="text1">
Text1
</p>
<p id="text2">
Text2
</p>我还添加了一个检查，这样如果用户单击show按钮并且元素已经存在，slideToggle就不会启动。
或者您可以使用slideUp和slideDown:
function hide(num) {
var elem = $("#text" + num);
if (elem.css('display') == 'block') {
elem.animate({
'opacity': 0
});
}
elem.slideUp();
}
function show(num) {
var elem = $("#text" + num);
if (elem.css('display') == 'none') {
elem.animate({
'opacity': 1
});
}
elem.slideDown();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="show(1)">
Show text 1
</button>
<button onclick="show(2)">
Show text 2
</button>
<button onclick="hide(1)">
Hide text 1
</button>
<button onclick="hide(2)">
Hide text 2
</button>
<p id="text1">
Text1
</p>
<p id="text2">
Text2
</p>或者，如果您可以更改代码，我可能建议为每个文本框创建一个show/hide按钮。像这样：
function show_hide(num) {
var elem = $("#text" + num);
elem.slideToggle('slow', function() {
if (elem.css('display') == 'none') {
elem.animate({
'opacity': 0
});
} else {
elem.animate({
'opacity': 1
});
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button onclick="show_hide(1)">
Show or Hide text 1
</button>
<button onclick="show_hide(2)">
Show or Hide text 2
</button>
<p id="text1">
Text1
</p>
<p id="text2">
Text2
</p>