gpt4 book ai didi

javascript - 如何使 jQuery 淡入/淡出元素平滑移入移出

转载 作者:行者123 更新时间:2023-12-01 15:43:56 24 4
gpt4 key购买 nike

假设我有这个代码:

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 中为每一个可能的运动设置动画,但是当你自动生成很多元素时,这真的很烦人。有没有办法为所有这些自动传送做到这一点?

最佳答案

是的,您可以使用 animate() 来做到这一点。 jQuery 中的函数。
这是你的代码:

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

关于javascript - 如何使 jQuery 淡入/淡出元素平滑移入移出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61089584/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com