Наше прошлое 20072009201120132014
г. Москва, ул. Гостиничная, д. 7А. кор.2
8 (499) 404-26-56
пн-пт 11:00 - 19:00
 

jQuery анимация - метод animate

Требования к сайтам в последнее время очень сильно выросли, сейчас люди хотят видеть не просто удобный и красивый сайт, но и живой, чтобы в нем постоянно что-то двигалось и выпадало. Как правило,  стоимость сайтов с красивой и продуманной анимацией на порядок выше, чем стоимость статичного сайта.   Для этих целей в библиотеки jQuery есть метод animate. С его помощью мы можем плавно менять css-свойства объектов, тем самым создавая анимацию. 

Сейчас мы сделаем простой пример, который будет перемещать и скрывать наш логотип. Выглядеть это будет примерно так: 

Исходный код с комментариями:

<html>
    <head>
        <title>jQuery анимация - метод animate | Дизайн студия OX2</title>
        <script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
        <style type="text/css">
            #img {
                position: absolute;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <img src="http://ox2.ru/images/fronted/logo-ox2.gif" alt="Компания OX2" id="img" />
        <script type="text/javascript">
            /**
             * Функция двигаеь картинку с id равным img
             */
            function animation() {
                $('#img').animate({
                    left: '800px', //Двигаем картинку влево на 800 пикселей
                    top: '500px', //Двигаем картинку вниз на 500 пикселей
                    opacity: '0', //Скрываем картинку
                }, 1200); //Длительность анимации 1.2 сек.
            }
        </script>
        <button onclick="animation()">GO</button>
    </body>
</html>

Как видно из текущего примера картинка один раз улетела, и второй раз кнопка не сработала. Чтобы мы могли многократно перемещать наш логотип, нам нужно при каждом нажатии на кнопку Go, возвращать начальные значения css. Для этого воспользуемся методом css. 

Для начала демка:

Исходный код:

<html>
    <head>
        <title>jQuery анимация - метод animate | Дизайн студия OX2</title>
        <script type="text/javascript" src="http://ox2.ru/lib/jquery-1.11.0.min.js"></script>
        <style type="text/css">
            #img {
                position: absolute;
                top: 30px;
                left: 0px;
                opacity: 1px;
            }
        </style>
    </head>
    <body>
        <button onclick="animation()">GO</button>
        <img src="http://ox2.ru/images/fronted/logo-ox2.gif" alt="" id="img" />
        <script type="text/javascript">
            /**
             * Функция двигаеь картинку с id равным img
             */
            function animation() {
                /**
                 * При вызове функции устанавливаем 
                 * начальные значения элемента с id - img
                 */
                $('#img').css({
                    top: '30px',
                    left: '0px',
                    opacity: '1'
                });

                $('#img').stop() //Останавливаем анимацию если она запущена
                        .animate({
                            left: '800px', //Двигаем картинку влево на 800 пикселей
                            top: '500px', //Двигаем картинку вниз на 500 пикселей
                            opacity: '0', //Скрываем картинку
                        }, 1200); //Длительность анимации 1.2 сек.
            }
        </script>
    </body>
</html>

Скачать исходник

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

Комментарии (Написать комментарий)

ПАСИФИКА [12.01.2016]

Комментарий:
как писать противоположенную сторону слову TOP и LEFT пробовал RIGHT не получается

Заполните все поля

Написать комментарий

Ваше имя

Комментарий