Шаг 60.
Библиотека jQuery. Эффекты. Создание собственных анимационных эффектов. Управление сразу несколькими свойствами (продолжение)

    На этом шаге мы рассмотрим еще один вариант использования метода .animate().

    Кроме свойств стиля, для управления которыми имеются сокращенные формы методов, мы можем управлять и другими свойствами, такими как: left, top, fontSize, margin, padding и borderWidth. Вернемся к сценарию, который увеличивает размер шрифта текста романа. Мы можем анимировать увеличение и уменьшение размера шрифта простой заменой метода .css() методом .animate():

$(document).ready(function() {
  var $speech = $('div.speech');
  var defaultSize = $speech.css('fontSize');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
    switch (this.id) {
      case 'switcher-large':
        num *= 1.4;      
        break;
      case 'switcher-small':
        num /= 1.4;
        break;
      default:
        num = parseFloat(defaultSize, 10);        
    }
    $speech.animate({fontSize: num + 'px'}, 'slow');
  });
});

Рис.1. Изменение размера шрифта методом .animate()

Полный текст этого примера можно взять здесь.

    На следующем шаге мы закончим изучение этого вопроса.




Предыдущий шаг Содержание Следующий шаг