Первый пример jQuery

Начнем с прелестей из-за которых мне однажды понравилась эта библиотека.

Первый и простой пример JQuery будет заключаться в анимации.



Вот код который я для этого использовал:

CSS:

<style>
.my_area
{
   display: block;
   width: 100px;
   height: 100px;
   border: #d17662 1px solid;
   background: #b8523c;
}
</style>

jQuery:

<script>
$(function()
{
   $('.my_button').click(function()
   {
     $('.my_area').css({width:100}).animate({width:'+=100'});
   });
});
</script>

HTML:

<span class="my_area"></span><br />
<input type="button" class="my_button" value="Кликни на меня" />

Теперь расскажу что я тут написал :)

$('.my_button') – тут мы селектором выбираем элемент .my_button (это любой HTML тег, у которого написано – class="my_button").

С помощью click() – мы привязываем событие "При нажатии левой кнопки мыши", и далее пишем что произойдет, когда мы кликнем на нашу кнопку.

А произойдет, напишу дословно:

$('.my_area').css({ width: 100 }).animate({ width: '+=100' });

Элементу ".my_area", назначить ширину "100" пикселей, и анимировать ширину на +=100 пикселей (прибавить еще 100 пикселей к ширине).

Копирование материалов разрешено только рерайтом, с ссылкой на главную страницу данного сайта.
© Автор - Игорь Вейник Евгеньевич www.veynik.ru 2013