[ainur777]

Всем привет! Подскажите как реализовать смену картинки. Есть 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>

Пожалуйста помогите!!!