我需要帮助来解决一些 mouseenter/mouseleave 问题。 这是一个视觉示意图:
所以，就有了这个垂直按钮 slider 。当您单击这些按钮中的任何一个时，都会弹出一个“灯箱”div 以及一个背景白色 div，与 slider 容器重叠。如果我再次单击灯箱 div，它会关闭并且所有内容都会恢复到默认状态。问题是按钮的 mouseenter/mouseleave 事件受到干扰，从而导致一些问题。
这是 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 .
谢谢。
佩德罗
请您参考如下方法:
做了一把 fiddle http://jsfiddle.net/crEHc/1/ 把灯箱的div放在容器外面，发现一个错字(“点击”.... 而不是 on("点击"...
$('.rocksType_DBitem_lightbox').one('click', function(){
