fadeIn/fadeOut将无法正确触发并重复自身jQuery [英] fadeIn/fadeOut wont fire correctly and repeats itself jQuery

问题描述

我的情况: 如果用户单击删除按钮(垃圾箱图标)，但没有从我的画布中选择图层，则我的工具提示应该显示出来，并建议他选择一个.一切都很好，但是fadeIn和Out不会正确触发.第一次单击它不会显示，但在第二次.如果您再次单击而没有选定图层，.tooltip突然开始失控闪烁...

my situation: if the user clicks the delete button(wastebin icon) without a selected layer from my canvas my tooltip should show up and give him advise to select one. everything is fine but the fadeIn and Out wont fire correctly. on first click it doesnt show up but on the second. if u click another times without selected layer the .tooltip suddenly begin to blink uncontrolled...

代码:

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

我不知道怎么了.我尝试将其链接为:

i dont know whats wrong. i tried chaining it like:

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

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

but still the same bug and no error message at all...

由于复杂性，我无法摆弄小提琴，但这是我游乐场的链接

i cant set up a fiddle because of complexity but here is the link to my playground

LINK M13游乐场

thx以获取任何帮助或提示 并为我的英语不好而感到抱歉:|

thx for any help or tip and sorry for my bad englisch :|

推荐答案

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

You create a .mouseup() handler each time the #clearer element is clicked, which causes your problem. A click is a composition betweeen a mousedown and mouseup on one element. That's why your fade is not fired on the first click, since only after the first click, the necessary mouseup handler is created.

将代码更改为此:

$('#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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！