jQuery: Meine Formen bleiben nach fadeOut versteckt, aber sie sollten nicht

Question

Ich habe this Tutorial verwendet. Jetzt möchte ich fadeOut, wenn die Maus nicht über das Menü schwebt. Das funktioniert, aber es bleibt ausgeblendet, wenn ich wieder schwebe. Leider habe ich keine Ahnung von jQuery;)

Es tut mir leid, dass ich den ganzen Code kopieren musste. Ich habe mein FadeOut auskommentiert, weil ich nicht glaube, dass es so funktionieren wird. Ich freue mich über jede Hilfe.

/* 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

diese Funktion Fügen Sie diese

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

EDITED

serviceDraw

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