If-else-statement涉及两个函数

Question

我仍然是一个noob，当涉及到jQuery，我真的把我的头发拉出来试图找出这一个，我希望有人与Javascript经验可以指向我仪式方向。

我有一个悬停功能，涉及一个div hide/show事件，它是通过悬停的li类涉及单独的mouseenter/mouseleave函数与动画触发的。

example

的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 类
• 其他：相同的事件的mouseenter 功能

所以，如果$('.home')盘旋，它会左右滑动以及但是右边对应的div会显示与李类动画留下的无论鼠标的意图表示留，如果在$('.home')徘徊并且出现相应的div后，用户悬停在说，&('.home')将滑回到默认的CSS位置，同时隐藏相应的div并同时发射$('.about')动画以及显示$('.about') li类的相应div等等。这应该是连续的（如循环中）。

有什么想法？

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> 

建议将不胜感激！

感谢

Answer 1

这应做到：

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(); 

现在，我看到的应用是什么，我改变了一些变量名，和缓存显示，部分（该li的每组s）和相关图标。

然后在$.each()我缓存在一个变量display，section和icon在sections_array与当前项目，并分配一个处理程序，当前section。该处理程序将不断引用这3个相关元素。

在此之后，它只是刚刚分配仅的mouseenter处理程序，它确实两件事情的问题：

• 显示设定的display，section和icon元素它的引用，

• 通过从我们先前使用缓存的整个集合中排除display，section和icon元素来隐藏所有其他元素方法。