有没有办法用 jQuery 为 textarea 的不透明度设置动画？答案

【问题标题】：Is there a way to animate the opacity of textarea with jQuery?有没有办法用 jQuery 为 textarea 的不透明度设置动画？
【发布时间】：2011-12-11 22:23:20
【问题描述】：

我需要为 textarea 中文本的不透明度设置动画，因此它会消失。当有人按下 Enter 时会发生这种情况。我已经设置了 enter press 的代码，但无法让代码动画工作。这是我的代码：

$(document).keydown(function(e){
if(e.which === 13){
// here I would like to animate the text
   };
});

【问题讨论】：

标签： javascript jquery jquery-animate jquery-events

【解决方案1】：

仅对于文本，我认为您需要 jQueryUI，并执行以下操作：

$("#textarea").keydown(function(e){
    if(e.which === 13){
        $(this).animate({color: 'transparent'},1000);
   }
});

这是一个小提琴：http://jsfiddle.net/adeneo/7pkNK/

请注意，光标也会消失，据我所知，唯一的解决方法是使用动画 gif 或其他自定义代码创建光标。

【讨论】：

谢谢，光标消失非常适合我的情况。它适合我需要做的事情。非常感谢。
@suludi 如果它是您的解决方案，您应该接受这个作为答案。
另外请问，我需要添加整个 jQuery UI，还是只能添加 rhe 效果剥离部分。
您只需要 UI Effects 核心来为颜色设置动画。

【解决方案2】：

    $(document).keydown(function(e){
     if(e.which === 13){
      $(formelement).animate({ color: "#FFFFFF" }, 600);

   };
});

【讨论】：

这会淡化整个文本区域，我只想淡化文本。

【解决方案3】：

这个来自 JQuery API 的例子会有帮助吗？

<div id="clickme">
   Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

查看 .fadeIn() 和 .fadeTo() 的 API。

在你的情况下，你可以只使用 $('#text' ).fadeOut();

【讨论】：

谢谢，我现在使用 FadeOut 功能，但我需要淡出文本，而不是整个 textarea。
@suludi 如果将文本包装在或
标记中，您可以执行以下操作：$('#textarea span').fadeOut()。这只会淡化文本。
这是不可能的，你不能在 HTML 元素的 textarea 中换行。
@suludi 您还可以为文本分配 ID <span id="text"></span> 然后... `$('#text').fadeOut();
@adeneo 对不起，我说错了。我指定了另一个元素，例如 ID 为“textarea”的
。不是 HTML 元素 .

【解决方案4】：

尝试使用jQuery's fadeOut method。

$(document).keydown(function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 13) {
        //here i would like to animate the text
        $('#idofobject').fadeOut(optionalduration, optionalcallback);
    }
});

根据this SO answer，我将使用代码的第二行检索被按下的键。

在阅读了您对@dremme 的评论后，我不相信有一种简单的方法可以使文本褪色。您必须在 textarea 顶部放置一个 div，其中包含文本，删除当前在 textarea 中的文本，然后淡出覆盖 div。

【讨论】：