Есть ли способ оживить непрозрачность textarea с помощью jQuery? - PullRequest
1 голос
/ 12 декабря 2011

Мне нужно анимировать непрозрачность текста в текстовой области, чтобы он исчезал. Это происходит, когда кто-то нажимает клавишу ввода. Я установил код для нажатия клавиши ввода, но не могу заставить код анимировать для работы. Вот код, который у меня есть:

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

Ответы [ 4 ]

2 голосов
/ 12 декабря 2011

Только для текста, я думаю, вам понадобится jQueryUI, и сделайте что-то вроде этого:

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

Вот скрипка: http://jsfiddle.net/adeneo/7pkNK/

Помните, что курсор будеттакже исчезают, и, насколько я знаю, единственный способ обойти это - создать курсор с анимированным GIF или другим пользовательским кодом.

1 голос
/ 12 декабря 2011
    $(document).keydown(function(e){
     if(e.which === 13){
      $(formelement).animate({ color: "#FFFFFF" }, 600);

   };
});
0 голосов
/ 12 декабря 2011

Попробуйте сделать это, используя метод jQuery fadeOut .

$(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);
    }
});

Я бы получил нажатую клавишу, используя вторую строку моего кода, согласно этого SO ответа.


После прочтения вашего комментария к @dremme, я не верю, что есть способ потушить просто текст , который прост.Вам нужно будет поместить div поверх текстовой области с текстом в нем, удалить текст, который в данный момент находится в текстовой области, и затемнить скрывающий элемент div.

0 голосов
/ 12 декабря 2011

Поможет ли этот пример из API JQuery?

<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.
  });
});

Проверьте API для .fadeIn () и .fadeTo ().

В вашем случае вы можете просто использовать $ ('# text') .fadeOut ();

...