Jquery 包含两个函数的If-else语句

说到jQuery，我仍然是个傻瓜，我真的在竭尽全力想弄明白这一点，我希望有Javascript经验的人能为我指明方向

我有一个包含div hide/show事件的悬停函数，它是通过悬停包含在一个单独的mouseenter/mouseleave函数中的li类来触发的

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

我试图在以下条件下在MoueCenter上的左滑li类中设置mouseleave动画：

• If：当由触发悬停函数时 悬停在其他3个li中的任意一个上 班级
• 其他：与mouseenter事件相同 作用

因此，如果将

$（'.home'）

悬停，它将向左滑动，右侧相应的div将显示并保持显示，而不管鼠标的意图如何，li类动画将显示在左侧。但是，如果将

$（'.home'）

悬停并显示相应的div之后，用户将悬停在say

$（'.about'）

，

&（.home'）上

将滑回其默认CSS位置，同时隐藏其对应的div并同时触发

$（'.about'）

动画，同时显示

$（'.about'）

li类的相应div等。这应该是连续的（如在循环中）

有什么想法吗

html:

建议将不胜感激

谢谢

这应该可以做到：

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（）

中，我将

显示

、

节

和

图标

缓存在变量中，这些图标与

节数组

中的当前项相关，并为当前

节

分配了一个处理程序。该处理程序将持续引用这3个相关元素

在此之后，只需分配

mouseenter

处理程序即可，该处理程序可完成两件事：

• 显示其引用的

  显示

  、

  部分

  和

  图标

  元素集

• 通过将

  显示

  、

  部分

  和

  图标

  元素从之前使用该方法缓存的整个集合中排除，隐藏所有其他元素

---

我相信我欠你一大堆感激之情，感谢你帮我解决了这个问题以及我的一些其他问题。你的代码成功了，我更新了示例站点，所以如果你感兴趣的话可以查看一下。再次感谢你的支持，你的男人！

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