jQuery：我的形狀在fadeOut後隱藏，但它們不應該

Question

我使用this教程。 現在我想淡出當鼠標懸停在菜單上。這有效，但當我再次徘徊時，它仍然消失。 不幸的是，我沒有jQuery的線索;）

我很抱歉，我不得不復制整個代碼。我評論了我的fadeOut，因爲我認爲它不會以這種方式工作。 我感謝任何幫助。

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

添加這個功能，這可能有助於

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

EDITED

serviceDraw

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