Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2014, 15:37
Аспирант
Отправить личное сообщение для ainur777 Посмотреть профиль Найти все сообщения от ainur777
 
Регистрация: 09.11.2013
Сообщений: 32

Анимация gif картинки при нажатии на ссылку
Всем привет! Подскажите как реализовать смену картинки. Есть gif анимация которая состоит из 5 кадров, каждый кадр по 0,2 секунды. Общее 1 секунда. Мне нужно при наведении на кнопки меню(всего 5) сменялась gif анимация. Изначально чтобы было анимация в покое.

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

Вот код смены картинки:
$(document).ready(function () {                
                  $('#my_menu2').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/44.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
                    $('#1').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/45.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
                            $('#2').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/46.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
                                        $('#3').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/47.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
                                        $('#4').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/48.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
                                        $('#5').hover(function () {
                   
                    $('.page_cont').css({
                        'background-image': 'url(images/44.png)',
                        'height':'1600%',
                        '-moz-background-size':'100%',
                        '-webkit-background-size':'100%',
                        '-o-background-size':'100%',
                        'background-size':'100%',
                        'min-height':'469px',
                        'min-width':'1000px'
                    });
                
                });
            });
        })(jQuery)


<ul id="my_menu2">
    <li><a href="index.html"><span>Главная</span></a></li>
</ul>
<div class="page_cont">
<ul id="my_menu">
    <li><a href="" id="1"><span>О НАС</span></a></li>
    <li><a href="" id="2"><span>УСЛУГИ</span></a></li>
    <li><a href="" id="3"><span>ПОРТФОЛИО</span></a></li>
    <li><a href="" id="4"><span>КОНТАКТЫ</span></a></li>
    <li><a href="" id="5"><span>КАРТА <p style="position: absolute; margin-top: -60px;">&nbsp;ИНТЕРЕСНО </p></span></a></li>
</ul>
 
</div>


Пожалуйста помогите!!!
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2014, 15:55
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Спрайты - не вариант?
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2014, 16:23
Аспирант
Отправить личное сообщение для ainur777 Посмотреть профиль Найти все сообщения от ainur777
 
Регистрация: 09.11.2013
Сообщений: 32

Сообщение от BETEPAH Посмотреть сообщение
Спрайты - не вариант?
Вариант, но получается какая то хр. начинают плавать divы. Я когда то слышал что можно через gif сделать вывод картинки при наведение на ссылки по кадровую.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки при нажатии на радиокнопку (нужен совет) Roningrad Элементы интерфейса 2 04.04.2013 21:12
Смена картинок при клике ссылку illuminat jQuery 3 14.09.2012 17:50
Скрипт, при наведении на ссылку открывает 4 картинки Игорек Элементы интерфейса 7 01.09.2012 22:01
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 14:49
Выпадающее окошко при нажатии на ссылку Akimserg Элементы интерфейса 3 21.10.2010 15:50