Я все еще новичок, когда дело доходит до jQuery, и я буквально выдергиваю свои волосы, пытаясь понять это, я надеюсь, что кто-то с опытом Javascript сможет направить меня в направлении обряда.
У меня есть функция наведения, включающая в себя событие div hide / show, которое вызывается при наведении курсора на li, участвующие в отдельной функции mouseenter / mouseleave с анимацией.
пример
jQuery:
//Right display div swap on hover
$('.home, .about, .contact, .services').hover(function(){
$('#display_'+$(this).attr('class')+':hidden').fadeIn(400);
}, function() {
$('#display_'+$(this).attr('class')).hide()
});
//Slide left li classes on mouseenter
var sections = ['home','about','contact','services'];
$.each(sections, function(i,val) {
var main = $('.' + val);
var icon = $('#icon_' + val);
main.mouseenter(function(){
main.stop().animate({left:'115px'}, 600)
icon.filter(':hidden').fadeIn(600);
}).mouseleave(function(){
main.stop().animate({left:'65'}, 600)
icon.hide();
});
});
//Hidden icons
$('#icon_home').hide();
$('#icon_about').hide();
$('#icon_contact').hide();
$('#icon_services').hide();
});
Я пытаюсь запустить анимацию отпускания мышью в //Slide left li classes on mouesenter
при следующих условиях:
- Если: когда функция наведения запускается путем наведения курсора на любой из других 3 классов li
- else: то же событие, что и у мыши с вводимой функцией
То есть, если $('.home')
находится, он будет скользить влево, а соответствующий div справа будет отображаться и отображаться с анимированным слева классом li независимо от цели мыши, однако, если после наведения $('.home')
и появления соответствующего div, пользователь наводит курсор на, скажем, $('.about')
, &('.home')
вернется к своей позиции CSS по умолчанию, скрывая соответствующий div и одновременно запуская анимацию $('.about')
вместе с отображением соответствующего div $('.about')
li class и так далее.Это должно быть непрерывным (как в цикле).
Есть мысли?
html:
<div id="right_nav">
<div id='display_home'><img src="images/gallery/home.png" width="605" height="300" /></div>
<div id='display_about'><img src="images/gallery/about us.png" width="605" height="300" /></div>
<div id='display_contact'><img src="images/gallery/Contact Us.png" width="605" height="300" /></div>
<div id='display_services'><img src="images/gallery/Services.png" width="605" height="300" /></div>
</div>
<div id="left_nav">
<div id="divider_home"><img src="divider.png" width="190" height="2" /></div>
<div id="divider_about"><img src="divider.png" width="190" height="2" /></div>
<div id="divider_contact"><img src="divider.png" width="190" height="2" /></div>
<div id="divider_services"><img src="divider.png" width="190" height="2" /></div>
<div id="icon_home"><img src="Icons/home.png" width="60" height="60" /></div>
<div id="icon_about"><img src="Icons/about.png" width="60" height="60" /></div>
<div id="icon_contact"><img src="Icons/contact.png" width="60" height="60" /></div>
<div id="icon_services"><img src="Icons/services.png" width="60" height="60" /></div>
<div id="thumb">
<ul>
<li class="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
<li class="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
<li class="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
<li class="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
</ul>
</div>
Предложения будут с благодарностью!
Спасибо