JQuery: show undefined sequence of children div for each mouseEnter event and then hide them all

Question

I wish to show a sequence of children divs in the same position (same container, different divs) on mouseEnter event and then, hide them all in the last mouseEnter action.

I used in the example three divs.

Every time the mouse enters in the div container (with class .square), it will show a different children div. This for three time (because children div = 3). The fourth one all the divs become hidden again.

I managed to do it, modifying a function found on Internet originally made for click events in order to replace the obsolete JQuery Toggle method. I renamed this function toggleEnter.

This is my code:

// function to toggle DIVS every MOUSEENTER event in the element:
$.fn.toggleEnter=function(){
    var functions=arguments
    return this.mouseenter(function(){
    var iteration=$(this).data('iteration')||0
    functions[iteration].apply(this,arguments)
    iteration= (iteration+1) %functions.length
    $(this).data('iteration',iteration)})}

// element to apply previous function:
$('.square').each(function(){     
    var n_div = $(this).find('div').length;

   // if (DIVs children of #MAIN) number is n, execute function n-times:        
    if (n_div == 3) {  
          $(this).toggleEnter(
              function(){$(this).find('div').eq(0).show()},
              function(){$(this).find('div').eq(1).show()},
              function(){$(this).find('div').eq(2).show()},
              function(){$(this).find('div').hide()});
    }

    if (n_div == 2) {  
          $(this).toggleEnter(
              function(){$(this).find('div').eq(0).show()},
              function(){$(this).find('div').eq(1).show()},
              function(){$(this).find('div').hide()});
    }

    if (n_div == 1) {  
          $(this).toggleEnter(
              function(){$(this).find('div').eq(0).show()},
              function(){$(this).find('div').hide()});
    }

});

My problem is that I can do it only for a specified number of children divs. How can I modify my JS code in order to make it shorter and not bind with numbers? In other words, how can I have this effect for any number of children divs?

fiddle : http://jsfiddle.net/XC3SL/23/

I wasn't able to obtain that because I am newbie in javascript. (I can understand some but usually I use copy and paste).

Answer 1

You can replace all that code with:

$('.square').mouseenter(function()
{
    var visible = $(this).find('div:visible');
    if (!visible.length)
        $(this).find('div').eq(0).show();
    else
    {
        var next = visible.next();
        if (next.length)
        {
            visible.hide();
            next.show();
        }
        else
            $(this).find('div').hide();
    }
});

I assumed that you actually need to have only one div visible at a time.

fiddle: http://jsfiddle.net/XC3SL/24/