gpt4 book ai didi

javascript - 如何使用它的占位符滑动切换输入

转载 作者:可可西里 更新时间:2023-11-01 12:58:24 25 4
gpt4 key购买 nike

伙计们,我写了一段代码,每当我点击一个按钮(那个加号)时,我的输入应该滑动,但是当你看到我运行的代码时,每当我首先点击那个按钮时,它开始滑动输入直到它到达占位符然后它开始将占位符作为一个单独的元素滑动,它们不会一起滑动,所以我想知道有什么方法可以解决这个问题吗?只有输入幻灯片和占位符一起滑动。

HTML:

<div id="container">
<h1>LIST<i class="fa fa-plus" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo"></div>

jQuery

    var plusSign = $("h1 i")
plusSign.on("click",function(event){
$('input:text').slideToggle(3000);
})

https://jsfiddle.net/Ghost007D/aduLw0u3/1/

最佳答案

最简单的方法是将您的输入修改为:

border: 0;        /* change */
display: block; /* add this */

并防止 jQuery 中的动画堆积 - 使用 .stop() 就像:

$('input:text').stop().slideToggle(3000);

此外,您还可以切换图标:

plusSign.toggleClass("fa-plus fa-minus"); // if needed

jsFiddle DEMO

正确的方法是围绕输入创建一个包装器并为该元素设置动画;但如果您对结果感到满意并且它已经过跨浏览器测试 - 您可以保持这样。


解释您遇到的问题:

.slideToggle() 做了很多事情:

  • 动画高度:
  • 如果元素没有高度设置为display: none;

但是如果您的元素有边框 - 这些边框不是动画的,并且会在元素设置为 display: none; 时立即消失,从而创建不需要的跳跃
另一个问题是在为 inline 元素设置动画时 - line-height 可能会干扰 - 因此设置为 inline-blockblock 很有帮助 - 很多。

关于javascript - 如何使用它的占位符滑动切换输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45653264/

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