我需要帮助解决一些mouseenter/mouseleave的问题。下面是一个视觉原理图:
这是一个垂直按钮滑块。当你点击任何一个按钮时,一个“lightbox” div弹出并覆盖在滑块容器上方。如果再次点击lightbox div,则关闭并返回默认状态。问题在于按钮的mouseenter/mouseleave事件会干扰导致一些问题。
以下是jQuery代码:
![Schematic](https://istack.dev59.com/rLCH1.webp)
以下是jQuery代码:
function rocksType_mouseEvents_run(){
// Mouseenter events
$('.rocksType_DBitems_container').on('mouseenter', '> div:not(.rocksType_highlighted)', function(){
$(this).stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.2%', 'margin-bottom':'1.2%'}, 300, 'swing')
.find('p', this).stop().animate({'font-size':'110%', 'color':'rgba(0, 0, 0, 1)'}, 100, 'swing');
});
// Mouseleave events
$('.rocksType_DBitems_container').on('mouseleave', '> div:not(.rocksType_highlighted)', function(){
$(this).stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.1%'}, 300, 'swing')
.find('p', this).stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 0.5)'}, 100, 'swing');
});
// Click events
$('.rocksType_DBitems_container').on('click', '> div:not(.rocksType_highlighted)', function(){
// De-highlight currently rocksType_highlighted item
function dehighlight_clickedRocksType(){
$('.rocksType_DBitems_container > div.rocksType_highlighted').removeClass('rocksType_highlighted').stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.2%'}, 300, 'swing')
.find('p').stop().animate({'font-size':'73%'}, 150, 'swing',
function(){
$(this).stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%', 'opacity':'0.3'}, 300, 'swing')
.find('p').stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 1)'}, 150, 'swing');
}
);
}
// De-highlight currently rocksType_highlighted item
dehighlight_clickedRocksType();
// Highlight clicked item
$(this).addClass('rocksType_highlighted').stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%'}, 300, 'swing')
.find('p').stop().animate({'font-size':'73%'}, 300, 'swing',
function(){
$(this).stop().animate({'font-size':'110%', 'color':'rgba(255, 255, 255, 0.5)'}, 300, 'swing')
.parent().stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.3%', 'margin-bottom':'1.3%', 'opacity':'1'}, 300, 'swing',
function(){
$('.rocksType_DBitem_lightbox').fadeIn(1000);
$('.rocksType_lightboxBackground').fadeIn(1000);
$('.rocksType_DBitem_lightbox').one('click', function(){
$(this).fadeOut(300);
$('.rocksType_lightboxBackground').fadeOut(300);
// De-highlight currently rocksType_highlighted item
dehighlight_clickedRocksType();
});
}
);
}
);
});
}
rocksType_mouseEvents_run();
...和一个FIDDLE。
谢谢。
Pedro