fadeIn/fadeOut wont fire correctly and repeats itself jQuery

问题

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...

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);
};
});

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 Playground

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

回答1:

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.

Change your code to this:

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

and it should work as intended.

回答2:

try

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

and remove the next line $('.tooltip').delay(3000).fadeOut(200);

来源：https://stackoverflow.com/questions/19845459/fadein-fadeout-wont-fire-correctly-and-repeats-itself-jquery

标签

jquery

if-statement

tooltip

mouseevent

fadein