gpt4 book ai didi

javascript - jquery 动画(向右滑动)

转载 作者:太空宇宙 更新时间:2023-11-04 05:41:19 28 4
gpt4 key购买 nike

我试图通过使用 jquery 向右缓慢滑动来显示内容来扩展按钮,但我无法让它工作。另外,我没有控制台错误

$( document ).ready(function() {
$('.btn').on('click', () => {
$('.contact').animate({'display': 'block'}, 500);
});
});
.btn{
color: black;
background: white;
border: 1px solid black;
}
.contact{
display:none;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='btn'> click here <span class="contact"> slide out </span></a>
</body>
<

最佳答案

是的,您可以通过宽度切换来实现。

$(".contact").animate({width:'toggle'},350);

要防止文本分两行,您可以使用快速 CSS 将文本分到下一行。

white-space:nowrap;

现在我们将隐藏文本直到它完全展开。只需添加一个 visibility:hidden 即可。

现在,通过 jquery,我们将在使用 setTimeout 函数延迟后显示文本。

 setTimeout(function(){ 
$(".contact").css("visibility","visible");
}, 350);

$( document ).ready(function() {
$('.btn').on('click', () => {

$(".contact").animate({width:'toggle'},350);

setTimeout(function(){
$(".contact").css("visibility","visible");
}, 350);



});
});
.btn{
color: black;
background: white;
border: 1px solid black;
}
.contact{
display:none;
visibility:hidden;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='btn'> click here <span class="contact"> slide out </span></a>
</body>
<

关于javascript - jquery 动画(向右滑动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59203199/

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