Оператор if-else с участием двух функций

Я все еще новичок, когда дело доходит до jQuery, и я буквально рву на себе волосы, пытаясь понять это, я надеюсь, что кто-то с опытом работы с Javascript может указать мне направление обряда.

У меня есть функция наведения, включающая событие скрытия/отображения div, которое запускается путем наведения классов 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(); 
});

Я пытаюсь создать анимацию mouseleave в //Slide left li classes on mouesenter fire при следующих условиях:

  • Если: когда функция наведения запускается при наведении на любой из трех других классов li.
  • else: то же событие, что и функция mouseenter

Таким образом, если $('.home') зависает, он будет скользить влево, а соответствующий div справа будет отображаться и оставаться показанным с классом li, анимированным влево, независимо от намерения мыши, однако, если после $('.home') зависает и появляется соответствующий div, пользователь наводит курсор, скажем, $('.about') , &('.home') вернутся к своей позиции CSS по умолчанию, скрывая соответствующий div и одновременно запуская анимацию $('.about') вместе с отображением соответствующего div класса $('.about') li и так далее. Это должно быть непрерывным (как в цикле).

Есть предположения?

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>

Предложения будут приняты с благодарностью!

Спасибо


if-statement jquery hover mouseenter
person dcd0181    schedule 24.06.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это должно сделать это:

var all_displays = $('#right_nav > [id^="display_"]');
var all_sections = $('#thumb > ul > li');
var all_icons = $('#left_nav > [id^="icon_"]');

var sections_array = ['home', 'about', 'contact', 'services'];

$.each(sections_array, function(i, sec) {
    var display = all_displays.filter('#display_' + sec);
    var section = all_sections.filter('.' + sec);
    var icon = all_icons.filter('#icon_' + sec);

    section.mouseenter(function() {
        if( icon.is(':hidden') ) {

            display.fadeIn(400);
            section.stop().animate({ left: '115px' }, 600);
            icon.fadeIn(600);

            all_displays.not( display ).hide();
            all_sections.not( section ).stop().animate({ left: '65' }, 600);
            all_icons.not( icon ).hide();

        }

    });
});


all_icons.hide();

Теперь, когда я вижу, что представляет собой приложение, я изменил имена некоторых переменных и кэшировал каждый набор дисплеев, разделов (lis) и связанных значков.

Затем в $.each() я кэшировал в переменной display, section и icon, связанные с текущим элементом в sections_array, и назначил обработчик текущему section. Этот обработчик будет постоянно ссылаться на эти 3 связанных элемента.

После этого нужно было просто назначить только обработчик mouseenter, который делает 2 вещи:

  • отображает набор элементов display, section и icon, на которые он ссылается,

  • скрывает все остальные, исключая элементы display, section и icon из всех наборов, которые мы ранее кэшировали с помощью not()< метод sup>[docs].

person user113716    schedule 24.06.2011
comment
Я считаю, что я должен вам кучу благодарности за помощь мне с этим, а также с несколькими другими моими проблемами. Ваш код помог, я обновил пример сайта, так что проверьте его, если вам интересно. Еще раз спасибо за защиту, ваш человек! - person dcd0181; 24.06.2011