0

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

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

  • 如果：当悬停函数通过悬停其他 3 个 li 类中的任何一个触发时
  • else: 与 mouseenter 函数相同的事件

因此，如果 $('.home') 鼠标悬停，它将向左滑动，并且右侧的相应 div 将显示并保持显示，并且无论鼠标的意图如何，都将显示 li 类动画，但是，如果 $('.home') 鼠标悬停后并出现相应的 div，则用户将鼠标悬停在说 $('.about')， &('.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>

建议将不胜感激！

谢谢

4

1 回答 1

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

现在我了解了应用程序是什么，我更改了一些变量名称，并缓存了每组显示、部分（lis）和相关联的图标。

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

之后，只需分配处理程序mouseenter，它会做两件事：

  • 显示集合display，section以及icon它所引用的元素，

  • 通过从我们之前使用[docs]方法缓存的整个集合中排除display,section和元素来隐藏所有其他元素。iconnot()

于 2011-06-24T12:18:05.180 回答