JQuery анимации


JQuery, вероятно, наиболее распространенная библиотека JavaScript в мире. Не в последнюю очередь это обеспечил акцент на простоте использования.

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

Так как вы, наверное, уже слышали много о преимуществах Jquery из-за большого количества разговоров вокруг этой библиотеки, я начну писать код. Все примеры кода являются функциональными: вы можете вставить их в пустой HTML-файл и начать проверку JavaScript и JQuery сразу. Я полагаю, у вас уже есть базовые знания о JQuery и JavaScript, так как я не буду подробно объяснять работу анонимных функций, к примеру.

Скрытие и отображение

Первый пример является самым простым, и он будет служить для введения в структуру JQuery и получения работающей анимации. Мы динамически вставляем кнопку, а при нажатии, скрываем или показываем этот пункт. На JQuery жаргоне, это действие называется переключение.

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('<button>Toggle</button>').click(function() {
            $('p#showHide').toggle();
        }).insertBefore('p#showHide');
    });
    </script>
</head>
<body>
<p id="showHide">Я буду показан или скрыт</p>
</body>
</html>
Как и многие другие структуры JavaScript, JQuery могут быть включены ссылки на его последней версии 1.x на Google CDN (нет необходимости загружать любые .js файлы на сервер). Jquery имеет фасад, объект JQuery, который может быть использован для доступа ко всем функциональных возможностей, которые нам нужны. Псевдоним для объекта JQuery является глобальной переменной $. Глобальная переменная может и странно звучит, но в JavaScript это довольно общий шаблон.

Когда анонимная функция передается в $, он будет выполнен, когда документ полностью загружен. Наша функция создает кнопку (это то, что произойдет, когда вы передаете HTML строку $), а также обработчик OnClick случае вызов метода переключения (), который будет показывать или скрывать пункт, выбранный в зависимости от его текущего состояния. Наконец, мы осуществляем вызов InsertBefore (), чтобы вставить кнопку в DOM.

Скрытие и отображение (улучшенное)

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

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var button = $('<button>Скрыть</button>').toggle(function() {
                $('p#showHide').hide();
                button.text('Показать');
            },
            function() {
                $('p#showHide').show();
                button.text('Скрыть');
        }).insertBefore('p#showHide');
    });
    </script>
</head>
<body>
<p id="showHide">Я буду показан или скрыт</p>
</body>
</html>
Первая функция скрывает абзац и изменяет текст кнопки. Вторая делает прямо противоположное.

Затухание

Затухание работает с непрозрачностью: заставляет исчезнуть или появиться элемент.

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var button = $('<button>Скрыть</button>').toggle(function() {
                $('p#showHide').fadeOut();
                button.text('Показать');
            },
            function() {
                $('p#showHide').text('Я возвращаюсь...');
                $('p#showHide').fadeIn(10000, function() {
                    $('p#showHide').text('Я вернулся из мертвых.');
                });
                button.text('Скрыть');
        }).insertBefore('p#showHide');
    });
    </script>
</head>
<body>
<p id="showHide">Я буду объектом манипуляций с прозрачностью</p>
</body>
</html>
Многие функции JQuery принимают обратные вызовы в качестве аргументов. Каждый JavaScript API является асинхронным и функции, такие как Fadeout () возвращают сразу после того, как вы их вызываете, даже если переход все еще работает (в данном случае, это занимает 10 секунд.) Тем не менее, вы можете передать функцию обратного вызова, который будет выполняться по завершении работы.

Скольжение

Что мы можем сделать с затуханием, это также мы можем сделать со скольжением.

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var button = $('<button>Скрыть</button>').toggle(function() {
                $('p#showHide').slideUp(5000);
                button.text('Показать');
            },
            function() {
                $('p#showHide').text('Я возвращаюсь...');
                $('p#showHide').slideDown('normal', function() {
                    $('p#showHide').text('Я вернулся из мертвых.');
                });
                button.text('Скрыть');
        }).insertBefore('p#showHide');
    });
    </script>
</head>
<body>
<p id="showHide">Я буду объектом манипуляций для показа скольжения</p>
</body>
</html>
Опять же, мы можем указать длительность как 'slow', 'normal' и 'fast' или через задать свое значение в миллисекундах.

Пользовательские анимации

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

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#animated').animate({
            'height' : '200px',
            'width' : '200px'
        });
    });
    </script>
</head>
<body>
<p id="animated" style="background-color: gray;">Я буду анимирован.</p>
</body>
</html>
Переключение анимации

Конечно, мы можем поставить все вместе, и переключать другую скрытие/показ анимации.

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var button = $('<button>Restrict</button>').toggle(
            function() {
                button.text('Увеличить');
                $('#animated').animate({
                    'height' : '200px',
                    'width' : '200px'
                });
            },
            function() {
                button.text('Сократить');
                $('#animated').animate({
                    'height' : '400px',
                    'width' : '400px'
                });
            }).insertBefore('#animated');
    });
    </script>
</head>
<body>
<p id="animated" style="height: 400px; width: 400px; background-color: gray;">Я буду анимирован.</p>
</body>
</html>
Пользовательские анимации и длительность обратных вызовов

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

<html>
<head>
    <title>jQuery анимации</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var button = $('<button>Сократить</button>').toggle(
            function() {
                button.text('Увеличить медленно');
                $('#animated').animate({
                    'height' : '200px',
                    'width' : '200px'
                });
            },
            function() {
                button.text('Сократить');
                $('#animated').animate({
                    'height' : '400px',
                    'width' : '400px'
                }, {
                    duration: 10000,
                    complete: function() {
                        $('#animated').animate({
                            'font-size' : '20px'
                        })
                    }
                });
            }
        ).insertBefore('#animated');
    });
    </script>
</head>
<body>
<p id="animated" style="height: 400px; width: 400px; background-color: gray;">Я буду анимирован.</p>
</body>
</html>
Демонстрация:

Я буду анимирован.


Вывод

Я надеюсь, что это был хороший обзор возможностей JQuery анимации HTML-страниц. Стоит отметить, что в последних версиях нет toggle() (точнее, работает не совсем так), поэтому я использую в своих примерах версию 1.7.1. Для последних версий это все можно реализовать с помощью переключателей – а сам код анимации будет точно таким же.

Если вам требуется создать какую-либо анимацию на страницах вашего веб-сайта или блога, то за минимальное вознаграждение я вам помогу. Пишите – up777up@yandex.ru или стучите сразу в скайп – up777up2 – ежедневно по Москве днями онлайн. Любые работы по сайтам: JavaScript, jQuery, PHP, MySql.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегистатьи IT, анимация, jQuery, javascript




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Определитель (детерминант) матрицы 2 на 2
Урок 39. Коллекция Стек (Stack) C#
Урок 2. Введение в операторы SQL