<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

jQuery эффекты

jQuery эффекты

На этом уроке, мы рассмотрим эффекты в jQuery – это такие методы, как hide, show, toggle, slide, fade и animate.

Создадим тестовый блок для демонстрации примеров jQuery методов, применяемых для создания различных эффектов и стилизуем его.

<div id="test"></div>

#test {
    background:#bdfa02;
    height:100px;
    width:200px;
    position:absolute;
}

Для запуска эффектов нам потребуются кнопки с разными классами. Мы будем обращаться к каждой кнопке по названию класса и вешать на неё определенное действие.

jQuery анимация

Рассмотрим, как можно анимировать элементы на странице, изменяя их стили. Например изменим ширину у блока, прибавив к текущей ширине 150 пикселей. Создадим кнопку, при клике по которой, наш блок плавно вытянется вправо.

<button class="changeWidth">Изменить ширину</button>

По событию клик по кнопке с классом changeWidth мы запускаем функцию, внутри которой выбираем наш тестовый блок #test и применяем к нему метод animate. Метод animate изменяет CSS свойство с анимацией, делает это плавно. Он принимает на себя два параметра: объект, где мы изменяем ширину (CSS свойство) и скорость анимации. Прямоугольник может двигаться ещё медленнее, тоесть за 2 секунды он изменит свою ширину до 350 пикселей.

$(document).ready(function(){
    $(".changeWidth").click(function(){
    $("#test").animate({width: '350px'}, 2000);
});
});

jQuery скрыть / показать

Метод hide()


<button class="hideBtn">Скрыть</button>

При клике по кнопке с классом hideBtn, запускаем функцию, внутри которой выбираем наш блок и скрываем его в течении 1 секунды.

$(".hideBtn").click(function(){
    $("#test").hide(1000);
});

Метод show()

Показывает элемент на странице, который мы только-что скрыли.

<button class="showBtn">Показать</button>
    $(".showBtn").click(function(){
    $("#test").show(2000);
    });

Метод fadeout()

Плавно растворяет элемент, делая его полностью прозрачным.

<button class="fadeOut">Скрыть(fadeOut)</button>

К нашему блоку применяем метод fadeout, передавая в параметрах скорость исчезновения – 2 секунды.

$(".fadeOut").click(function(){
    $("#test").fadeOut(2000);
});

Метод fadeIn()

Плавно меняет прозрачность элемента до полной его видимости (для работы эффекта элемент должен быть изначально скрыт). Действует противоположным образом.

<button class="fadeIn">Показать(fadeIn)</button>
$(".fadeIn").click(function(){
    $("#test").fadeIn(2000);
});

У обоих методов по умолчанию, скорость проявления / растворения равна 400, поэтому в параметрах можно ничего не передавать. Все равно процесс будет происходить более-менее плавно.

Метод fadeToggle()

Если элемент скрыт, то данная функция отображает его (используя метод show). Если элемент видимый — скрывает его (используя метод hide).

<button class="fadeToggle">Переключить(fadeToggle)</button>
$(".fadeToggle").click(function(){
    $("#test").fadeToggle(1000);
});

Метод slideUp()

Плавное исчезновение элемента, за счет уменьшения его высоты. Элемент скользит вверх, теряя высоту.

<button class="slideUp">Скрыть(slideUp)</button>
$(".slideUp").click(function(){
    $("#test").slideUp();
});

Метод slideDown()

Появление элемента, за счет увеличения его высоты.

<button class="slideDown">Показать(slideDown)</button>
$(".slideDown").click(function(){
    $("#test").slideDown();
});

Метод slideToggle()

Переключает видимость элементов, используя эффект изменения их высоты.

<button class="slideToggle">Переключить(slideToggle)</button>
$(".slideToggle").click(function(){
    $("#test").slideToggle();
});

Заключение

Методы fadeOut, fadeIn и fadeToggle, элегантнее аналогичных методов, скрывают и показывают элементы.

See the Pen jQuery effects by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.