AjaxTips

В данной статье я расскажу о том как сделать Ajax запрос с помощью jQuery. Для наглядности покажу пару примеров использования библиотеки jquery для осуществления запросов. А в завершение порассуждаю о том где целесообразно использовать Ajax, а где нет.
Читать дальше

В этой статье я хочу рассказать о том как создаются такие элементы как списки и деревья. Очень часто эти элементы делаются динамическими. То есть, часть списка может быть скрыта до тех пор пока вы не наведете курсор на соответствующий элемент или не щелкните кнопкой мыши. Именно о динамических списках и деревьях пойдет речь далее. В конце статьи будут приведены готовые скрипты для создания списков на jquery.
Читать дальше

В последнее время все большую популярность приобретает эффект ротации изображений, который называется «карусель». Поэтому сегодня я хочу рассказать как работает данный эффект, а также показать как самостоятельно с помощью jquery создать карусель. Готовые скрипты, как всегда, ждут вас в конце. Итак, поехали!
Читать дальше

Для того чтобы сделать ваш сайт более профессиональным рекомендую создать такую вещь как индикатор загрузки файлов. Естественно, что сама загрузки должна осуществлять через Ajax. В данной статье я расскажу о том, как работает индикатор загрузки на javascript, а так же приведу конкретный пример создания собственного загрузчика, написанного на jquery.
Читать дальше

В данной статье я подробно рассмотрю вопрос создания собственной галереи изображений. Несмотря на то, что существует огромное количество готовых решений, мне кажется не будет лишним самостоятельно разобраться в данном вопросе. Хотя бы с целью развития себя как программиста. Я не предлагаю писать все с нуля, вместо этого я рекомендую использовать фреймворк jquery, который позволит не думать о мелких технических вопросах, а сосредоточиться на главном. Далее в статье я подробно расскажу как создать свою собственную галерею изображений, а в конце приведу готовые скрипты.
Читать дальше

.fadeIn( [ duration ], [ callback ] )
Функция fadeIn() служит для создания эффекта проявляющихся элементов путем изменения параметра «opacity» с 0% до 100%.

.fadeIn( [ duration ], [ callback ] )
duration - строка или число, определяющее длительность анимации.
callback - функция, к которой обращается программа, как только анимация закончится.  

Параметр «duration» задает скорость анимации в миллисекундах. Если вместо числа указать значение «fast» или «slow», то длительность анимации будет соответствовать интервалам 200 и 600 миллисекунд. Если указать другие строковые значения или не задать параметр вообще, то по умолчанию используется интервал в 400 миллисекунд.

Параметр Callback — это указатель на функцию, которая запускается после завершения анимации (необязательный параметр). Как правило, это свойство используется, чтобы связать несколько разных анимаций.
Сделать анимацию можно для любого элемента, например, для простого изображения:

<div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />
    With the element initially hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

Неплохая социальная сеть разработчиков на jQuery, выполненная в стиле Digg.

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

.slideUp( [ duration ], [ callback ] )

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

.slideUp( [ duration ], [ callback ] )
Duration строка или число, определяющее длительность анимации. 
Callback функция, вызываемая после завершения анимации.

Метод .slideUp() , изменяет высоту элементов, создавая эффект скольжения. При этом нижние элементы страницы поднимаются наверх, скрывая таким образом старые элементы. Как только значение высоты достигает нуля, параметр display устанавливается в значение none для того, это делается для того чтобы элемент не участвовал в отображении страницы.
Параметр Duration задает скорость анимации в миллисекундах. Чем больше это значение, тем медленее анимация, а не наоборот. Строки  'fast' и 'slow'  задают длительность анимации — 200 или 600 миллисекунд соответственно. Если указать другие строковые значения или не задать параметр вообще, то по умолчанию используется интервал в 400 миллисекунд.
Параметр callback — это указатель на функцию, которая запускается после завершения анимации (необязательный параметр). Как правило, этот параметр используется, чтобы связать несколько разных анимаций. Важно помнить, что при создании анимации для нескольких элементов, функция callback выполняется для каждого элемента в отдельности, а не для всей анимации в целом.
Пример:

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

При условии, что элемент изначально отобржается, мы можем медленно его спрятать:

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