如何使用jQuery animate将焦点扩展到其他项目的顶部 [英] How to expand a textarea on focus over the top of other items using jQuery animate
问题描述
对于div和图像,这已经被回答了很多次,但是我找不到如何为 textarea
执行此操作的示例。
我希望 textarea
展开,而不是移动它下面的其他项目,但要展开它们的顶部。我只是简单地扩展它的一个工作示例,但是我想,如果我能得到它,就可以使扩展动画化,而不仅仅是将它扩大和缩小。
我不不想使用 position:absolute
也不想使用 textarea
以外的其他html元素。我需要这一切工作在一个表中,以下我的HTML显示。
这是我的html:
<表>
< tr>
< td>< textarea class =expandrows =1cols =10>< / textarea>< / td>
< / tr>
< tr>
< td>下面是一些文字。我希望它不会移动。< / td>
< tr>
< tr>
我的javascript:
$ p $
$(document).ready(function(){
$('#txt1')。focus(function(){
$(this).addClass('focused');
});
$('#txt1')。blur(function(){
$(this)。 removeClass('focused');
});
});
和我的CSS:
.focused {
position:relative;
身高:10em!重要;
z-index:1000;
}
textarea {
width:350px;
身高:1em;
line-height:1em;
resize:none;
选择一个:a table
with position:absolute;
或 div
with float:left
...
从我所看到的,决定使用表时,必须使用 positon:absolute;
,因为您需要使用 z-index:
并流过其他元素。使用 float:left
以及表
将清除浮动。否则,您可以轻松地使用 float:left
。
查看工作小提琴: < a href =http://jsfiddle.net/digitalextremist/JdA6L/ =nofollow> http://jsfiddle.net/digitalextremist/JdA6L/
$(window).load(function(){
$('textarea.expand')。focus(function(){
$(this ).addClass(expanding)
$(this).animate({
height:10em
},500);
});
$ ('textarea.expand')。blur(function(){
$(this).animate({
height:1em
},500);
$( this).removeClass(expanding)
});
});
新增了一个CSS类:
.expanding {
position:absolute;
z-index:9;
}
This has been answered many times and many ways for divs and images but I can't find an example of how to do this for a textarea
.
I want the textarea
to expand and not move the other items below it, but to expand over the top of them. I have a working example below of simply expanding it, but I want, if I can get it, to animate the expansion not just snap it larger and smaller.
I don't want to use position: absolute
nor do I want to use some other html element other than a textarea
. I need this all to work in a table as well, which my html below shows.
This is my html:
<table>
<tr>
<td><textarea class="expand" rows="1" cols="10"></textarea></td>
</tr>
<tr>
<td>Here is some text just below. I want it to not move.</td>
<tr>
<tr>
My javascript:
$(document).ready(function () {
$('#txt1').focus(function () {
$(this).addClass('focused');
});
$('#txt1').blur(function () {
$(this).removeClass('focused');
});
});
And my CSS:
.focused {
position: relative;
height: 10em !important;
z-index: 1000;
}
textarea {
width: 350px;
height: 1em;
line-height: 1em;
resize: none;
}
Choose one: a table
with position: absolute;
or a div
with float: left
...
From what I can see, with the decision to use a table, must use positon: absolute;
because you need to use z-index:
and flow-over other elements. Using float: left
along with a table
will clear floats. Otherwise you could use float: left
pretty easily.
See working fiddle: http://jsfiddle.net/digitalextremist/JdA6L/
$(window).load(function () {
$('textarea.expand').focus(function () {
$(this).addClass("expanding")
$(this).animate({
height: "10em"
}, 500);
});
$('textarea.expand').blur(function () {
$(this).animate({
height: "1em"
}, 500);
$(this).removeClass("expanding")
});
});
Added one CSS class:
.expanding {
position: absolute;
z-index: 9;
}
这篇关于如何使用jQuery animate将焦点扩展到其他项目的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!