Question

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

在这些条件下，我试图在//Slide left li classes on mouesenter火中设置mouseleave动画：

如果：当悬停功能被触发时徘徊在其他3里的任何一个类
else：与mouseenter相同的事件功能

因此，如果$('.home')悬停，它将向左滑动并且右侧的相应div将显示并保持显示为li类动画，而不管鼠标的意图如何，但是，如果$('.home')之后是悬停并显示相应的div，用户将鼠标悬停在$('.about')上，&('.home')将滑回其默认的CSS位置，同时隐藏相应的div并同时触发$('.about')动画并显示{{ 1}} li class'对应的div等等。这应该是连续的（如在循环中）。

有什么想法吗？

HTML：

$('.about')

建议将不胜感激！

谢谢

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元素集，
通过使用not()^[docs]方法从我们之前缓存的整个集合中排除display，section和icon元素来隐藏所有其他元素。< / p>

if-else-statement涉及两个函数

1 个答案: