Javascript 如何使jQuery fadeIn/Out元素平滑地移入和移出位置

假设我有以下代码：

函数隐藏（num）{
$（“#text”+num）.fadeOut（）；
}
函数显示（num）{
$（“#text”+num）.fadeIn（）；
}

显示文本1
显示文本2
隐藏文本1
隐藏文本2

文本1


文本2

是的，您可以使用jQuery中的

animate（）

函数来完成。

这是您的代码：

函数隐藏（num）{
$（“#text”+num）.fadeOut（）；
如果（num==1）{
$（“#text2”）。设置动画({
顶部：“25px”
}，500，函数（）{
});
}
如果（num==2）{
$（“#text1”）。设置动画({
顶部：“25px”
}，500，函数（）{
});
}
}
函数显示（num）{
$（“#text”+num）.fadeIn（）；
如果（num==1）{
$（“#text2”）。设置动画({
顶部：“100px”
}，500，函数（）{
});
}
如果（num==2）{
$（“#text1”）。设置动画({
顶部：“25px”
}，500，函数（）{
});
}
}

p{
位置：绝对位置；
}
#文本2{
顶部：100px；
}
#文本1{
顶部：25px；
}

显示文本1
显示文本2
隐藏文本1
隐藏文本2

文本1




文本2

您可以结合使用

滑动切换

和

动画

。

slideToggle

处理元素的显示和高度，而

animate

处理不透明度。您可能不需要更改

不透明度

，因此可以将其删除。这将处理动态生成的所有元素

函数隐藏（num）{
变量元素=$（“#文本”+num）；
if（elem.css（'display'）=='block'）{
动画元素({
“不透明度”：0
});
元素滑动切换（）；
}
}
函数显示（num）{
变量元素=$（“#文本”+num）；
if（elem.css（'display'）=='none'）{
元素滑动切换（）；
动画元素({
“不透明度”：1
});
}
}

显示文本1
显示文本2
隐藏文本1
隐藏文本2

文本1


文本2