Question

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

CODE：

$('#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)

但仍然是相同的错误，根本没有错误消息...

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

链接 M13 Playground

如果您有任何帮助或提示，请联系我们抱歉我的坏事：|

Answer 1

试

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

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

Answer 2

每次单击#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);
};
});

它应该按预期工作。

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

2 个答案: