Представим себе ситуацию, когда у нас есть красивая форма фиксированной ширины. В форме есть тег textarea, который вмещает в себя, допустим, 1000 символов. По умолчанию, видна лишь часть текста в этом теге. Но нам хочется просмотреть весь этот текст. Добавим немного jQuery, заставив это поле увеличиваться по ширине при получении фокуса.

Допустим, у нас на странице есть элемент textarea:

Code
<form>
  <textarea></textarea>
</form>


Изначально этот элемент имеет размеры 250px x 125px

Code
textarea {
  width: 250px;
  height: 125px;
}


Чтобы заставить это поле ввода при получении фокуса изменить свою ширину, используем простенький сниппет:

Code
$(function() {
  $("textarea").focus(function(){
  $(this).width(500);
  }).blur(function(){
  $(this).width(250);
  });
});


"Причесав" немного наш сниппет, добавив анимации, получим плавное увеличение ширины:

Code
$(function() {
  $("textarea").focus(function(){
  $(this).animate({ width:"500px"}, 1000);
  }).blur(function(){
  $(this).animate({ width:"250px"}, 500);
  });
});





Ваша оценка:

Рейтинг: 0.0 Всего:0 Добавил: Михалыч
Комментарии
Всего комментариев: 0