gpt4 book ai didi

jquery - CSS 过渡

转载 作者:行者123 更新时间:2023-11-28 18:38:51 28 4
gpt4 key购买 nike

我在下面创建了 jQuery 脚本,但是在将它转换为最好仅使用过渡的 CSS 时遇到了一些问题。如果有人可以帮助我,我会很高兴。

下面示例的解释:
- 当你点击文本框时,一个空的 div 容器会掉下来,但我在主要使用 CSS3 Transitions 编写脚本时遇到了一些问题.

HTML:

<div class="div">
<input type="text" class="textbox" id="textbox"/>
<p>example</p>
</div>

CSS:

.textbox {width:300px;}
.div { width:300px; background-color:#f8f8f8; }
p {width:300px; height:300px; background-color: #f8f8f8;}

jQuery:

$("#textbox").click(function() {
$("p").slideToggle();
});

现场演示:jsFiddle

最佳答案

p {
height: 0;
overflow: hidden;
transition: height .3s;
}
input:focus + p {
height: 20px;
}

这是你的 fiddle :http://jsfiddle.net/58VHE/33/ (点击聚焦于输入)。


P.S. 不要忘记供应商前缀。 fiddle 使用 -prefix-free自动添加供应商前缀。

关于jquery - CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12030007/

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