fadeIn / fadeOut不会正确触发并重复自己的jQuery

我的情况：如果用户点击了我的canvas中没有选定图层的删除按钮（垃圾箱图标），我的工具提示应该显示出来，并建议他选择一个。 一切都很好，但fadeIn和Out不会正常射击。 在第一次点击它不会出现，但在第二次。 如果你没有选择图层再次点击，.tooltip突然开始闪烁不受控制…

码：

$('#clearer').click(function() { var activeObject = canvas.getActiveObject(); if(activeObject === undefined || activeObject === null){ $('#clearer').mouseup(function(e) { var yPos = e.pageY-100; var xPos = e.pageX-100; $('.tooltip').css({ 'top': yPos, 'left': xPos }).fadeIn(200).html('Choose Layer to Delete!') $('.tooltip').delay(3000).fadeOut(200); } )}else { canvas.remove(activeObject); }; }); 

我不知道什么是错的。 我试着将它链接起来：

 .fadeIn(200).html('Choose Layer to Delete!').delay(3000).fadeOut(200) 

但仍然是相同的错误，没有任何错误消息…

由于复杂性，我不能设置一个小提琴，但这里是我操场的链接

LINK M13游乐场

thx任何帮助或提示和抱歉我的坏englisch：|

Answer 1

每次单击#clearer元素时都会创建一个.mouseup()处理程序，这会导致您的问题。 点击是一个元素上的mousedown和mouseup之间的组合。 这就是为什么你的淡入淡出不会在第一次点击时触发，因为只有在第一次点击后，才会创建必要的鼠标处理程序。

将您的代码更改为：

 $('#clearer').click(function() { var activeObject = canvas.getActiveObject(); if(activeObject === undefined || activeObject === null){ // removed .mousedown() var yPos = e.pageY-100; var xPos = e.pageX-100; $('.tooltip').css({ 'top': yPos, 'left': xPos }).fadeIn(200).html('Choose Layer to Delete!') $('.tooltip').delay(3000).fadeOut(200); )}else { canvas.remove(activeObject); }; }); 

它应该按预期工作。

Answer 2

尝试

 $('.tooltip').css({ 'top': yPos, 'left': xPos }).fadeIn(200,function(){$(this).delay(3000).fadeOut(200);}).html('Choose Layer to Delete!'); 

并删除下一行$('.tooltip').delay(3000).fadeOut(200);