Всем привет! Подскажите как реализовать смену картинки. Есть 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;"> ИНТЕРЕСНО </p></span></a></li>
</ul>
</div>
Пожалуйста помогите!!!
