Question

I used this tutorial.
Now I want to fadeOut when the mouse is not hovering over the menu. That works, but it stays faded out when I’m hovering again.
Unfortunately I have no clue of jQuery 😉

I’m sorry that I had to copy the whole code. I commented out my fadeOut, because I don’t think it’ll work this way.
I appreciate any help.

/* Set serviceMode to true to create your own shapes: */
var serviceMode = false;

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var str=[];
var perRow = 16;

/* Generating the dot divs: */

for(var i=0;i<192;i++)
{
    str.push('<div class="dot" id="d-'+i+'" />');
}

/* Joining the array into a string and adding it to the inner html of the stage div: */

$('#stage').html(str.join(''));

/* Using the hover method: */

$('nav li a').hover(function(e){

    /* serviceDraw is a cut-out version of the draw function, used for shape editing and composing: */

    if(serviceMode)
        serviceDraw($(this).attr('class'));
    else
        draw($(this).attr('class'));

}, function(e){



/* ----- $(dots).fadeOut('slow', function() {}); ----- */


});

/* Caching the dot divs into a variable for performance: */
dots = $('.dot');

if(serviceMode)
{
    /* If we are in service mode, show borders around the dot divs, add the export link, and listen for clicks: */

    dots.css({
        border:'1px solid black',
        width:dots.eq(0).width()-2,
        height:dots.eq(0).height()-2,
        cursor:'pointer'
    })

    $('<div/>').css({
        position:'absolute',
        bottom:-20,
        right:0
    }).html('<a href="" onclick="outputString();return false;">[Export Shape]</a>').appendTo('#stage');

    dots.click(function(){
        $(this).toggleClass('active');
    });
}

});

var shapes={

/* Each shape is described by an array of points. You can add your own shapes here,
   just don't forget to add a coma after each array, except for the last one */

home:[38,53,54,55,68,69,70,71,72,83,84,85,86,87,88,89,98,99,100,101,102,103,104,105,106,115,116,120,121,131,132,136,137,147,148,152,153,163,164,166,167,168,169,179,180,182,183,184,185],

about:[37,38,52,53,54,55,67,68,71,72,83,88,102,103,104,117,118,133,134,165,166,181,182],

music:[38,39,54,55,56,70,71,72,73,86,89,90,102,118,131,132,133,134,146,147,148,149,150,163,164,165],

links:[40,41,42,51,55,56,57,66,67,70,71,72,82,83,85,86,87,98,99,100,101,102,114,115,116,117,130,131,132,133,134,135,136,137,146,147,148,149,150,151,152],

contact:[34,35,36,37,38,39,40,41,42,43,44,50,51,52,58,59,60,66,68,69,73,74,76,82,85,86,88,89,92,98,102,103,104,108,114,119,124,130,140,146,147,148,149,150,151,152,153,154,155,156],

info:[22,23,38,39,69,70,71,86,87,102,103,118,119,134,135,150,151,166,167,168]
}

var stopCounter = 0;
var dots;

function draw(shape)
{
/* This function draws a shape from the shapes object */

stopCounter++;
var currentCounter = stopCounter;

dots.removeClass('active').css('opacity',0);


$.each(shapes[shape],function(i,j){
    setTimeout(function(){

        /* If a different shape animaton has been started during the showing of the current one, exit the function  */
        if(currentCounter!=stopCounter) return false;


        dots.eq(j).addClass('active').fadeTo('slow',0.4);

        /* The fade animation is scheduled for 10*i millisecond in the future: */
    },10*i);

});
}

function serviceDraw(shape)
{
/* A cut out version of the draw function, used in service mode */

dots.removeClass('active');

$.each(shapes[shape],function(i,j){
    dots.eq(j).addClass('active');
});
}

function outputString()
{
/* Outputs the positions of the active dot divs as a comma-separated string: */

var str=[];
$('.dot.active').each(function(){

    str.push(this.id.replace('d-',''));
})

prompt('Insert this string as an array in the shapes object',str.join(','));
}

Answer 1

Add this function this might help

$('nav li a').mouseout(function(){
     $(this).removeAttr('class');
});

EDITED

serviceDraw

$('nav li a').mouseout(function(){
     dots.removeClass('active').css('opacity',0);
});