このチュートリアルを使用しました。マウスがメニューの上に置かれていないときにフェードアウトしたいと思います。それは機能しますが、再びホバリングするとフェードアウトしたままになります。残念ながら、私は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(','));
}