Question

I’m still a noob when it comes to jQuery and I’m literally pulling my hair out trying to figure this one out, I’m hoping someone with Javascript experience can point me in the rite direction.

I have a hover function involving a div hide/show event which is fired by hovering li classes involved in a separate mouseenter/mouseleave function with animations.

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

I am trying to have mouseleave animations in //Slide left li classes on mouesenter fire under these conditions:

• If: When hover function is fired by
  hovering any of the other 3 li
  classes
• else: Same event as mouseenter
  function

So if $('.home') is hovered, it will slide left and the corresponding div on the right will show and stay shown with li class animated left regardless of the mouse’s intent, however, if after $('.home') is hovered and corresponding div appears, the user hovers over say $('.about') , &('.home') will slide back to it’s default CSS position while hiding it’s corresponding div and simultaneously firing $('.about') animations along with showing the $('.about') li class’ corresponding div and so on. This should be continuous (as in a loop).

Any thoughts?

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>   

Suggestions would be greatly appreciated!

Thanks

Answer 1

This should do it:

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

Now that I see what the application is, I changed some of the variable names, and cached each set of displays, sections (the lis), and the associated icons.

Then in the $.each() I cached in a variable the display, section and icon related to the current item in the sections_array, and assigned a handler to the current section. That handler will continuously reference those 3 related elements.

After that, it was simply a matter of just assigning only the mouseenter handler, which does 2 things:

• displays the set of display, section and icon elements it’s referencing,

• hides all the others by excluding the display, section and icon elements from the entire sets that we previously cached by using the not()^[docs] method.