如何使用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屋！