Истоник: jQuery Tip: Font Resizing With Animation Effects

Возьмем за основу вот этот код:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

и добавим к нему возможность увеличивать текст с эффектом анимации.

Вместо того чтобы увеличивать текст сразу по клику, мы сделаем, чтобы это происходило в течение нескольких миллисекунд. Мы можем использовать оригинальный скрипт, но заменим последнюю секцию с методом css() на animate().

И вот что получилось:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.animate({fontSize: finalNum + stringEnding},600);
		});
	});

Посмотрите демо, как это работает.

Популярность: 80%

Представляю Вам еще один блог о jQuery: Ромка!eu.

Читатели Хабра уже видели создание Романа: облако тэгов, стилизованное под доску с магнитами. А тем, кто не видел, рекомендую посмотреть. Выглядит очень симпатично.

В связи с анонсом обновился пост Блоги о jQuery на русском.

Популярность: 26%

Во всех языках программирования существует работа со строками и обработка массивов. И JQuery — не исключение. Комплиментарный и ненавязчивый по своей природе, JQuery не заменяет существующий набор функций JavaScript собственными, а просто дополняет их наиболее недостающими.
Обрезка строк: $.trim(value)

Для работы со строками в языке JavaScript имеется довольно большое количество функций, таких как split, substr, charAt (см. доп. информацию по ссылке http://www.w3schools.com/jsref/jsref_obj_string.asp). Однако, по каким-то загадочным причинам, функции trim для удаления пробелов в начале и конце строки нет. Но нашлись люди талантливые и не жадные, написавшие различные варианты собственных версий функции trim. Как например:

var trimmed = str.replace(/^\s+|\s+$/g, '') ;

Функция работает отлично. Однако, как насчет простого вызова функции trim() с помощью JQuery? Синтаксис выглядит следующим образом: $.trim(value)
var trimmed = $.trim(” this really needs to be trimmed “);
Доступно и понятно, не так ли?

Функции обработки массива:

$.each (container, callback)

В JQuery в дополнение к традиционным типам массивов JavaScript (массив строк, чисел, элементов ) существует также специальный массив объектов в виде пары ключ-значение.

В JavaScript массив записывается следующим образом:
var arr = [ “one”, “two”, “three”, “four”, “five” ];
А в JQuery (каждая пара отделена двоеточием так:
var obj = { item1: “one”, item2: “two” ,item3: “three”, item4: “four”};
Осуществить проход по массиву JavaScript несложно. Однако, это может сделать еще проще с помощью функции JQuery $.each. Синтаксис таков: $.each (container, callback). Функция обратного вызова получает два аргумента: в случае с массивом [] (традиционный JavaScript) — индекс и знамчение; а в случае с массивом {} (массив объектов со свойствами) — ключ и значение.

Таким образом, в приведенном примере JQuery может получать доступ к элементам массива (заранее прошу прощения за такое количество alert):

var arr=["one","two","three"];
var obj={ item1: "one", item2: "two", item3: "three"};

$.each(arr, function(n, val) { // выбираем содержание по очереди
 alert("Item "+n+" = "+val);
};

$each(obj, function (key,val) {
 alert("key "+key+" = "+val);
};

$.grep (array, callback, invert)

В JQuery есть функция $.grep(), которая возвращает массив элементов, удовлетворяющих определенному условию. Функции обратного вызова передается два параметра: текущее значение и его индекс. Например:

var arr=[10,20,30,40,50];

var newArr=$.grep(arr, function(n,i) {
 return (n>10 && n<50);
});

$.each(newArr, function(n,val) {
 alert("Item "+n+"="+val);
});

$.map (array, callback)

Ниже представлен еще один пример удобной функции, которая преобразовывает все элементы в массив за один заход. Преобразовать массив строк в массив чисел? Да. Преобразовать массив чисел обратно в массив строк? Да. Прибавить 10 к каждому числу массива? Да. Просто вызовите функцию $.map.

Например:

var arr=[10,20,30,40,50];
array = $.map(arr, function(val) {
 return ""+val+"";
});

Другие чрезвычайно полезные функции JQuery для работы с массивами:

$.inArray(value, array) возвращает позицию первого найденного элемента по заданному значению. Как например:

var inArr=$.inArray("this", ["this", "is", "a","great","fun"]);

$.unique(array) возвращает массив уникальных элементов. Как в этом примере:

var inArr=$.unique(["this", "is", "a","great","fun"]);

$.makeArray(object) создает массив из выбранных элементов. Как в примере ниже:

var divs = $.makearray($."div"));

$.extend(target, source1, source2, … sourceN) добавляет свойства источника в целевой элемент. Например:

var target = {firstname: "Вася", lastname: "Пупкин");
var source1 = {age: 20, gender: M};

$.extend(target, source);

Популярность: 39%