In jquery Définissez un délai pour le fondu sortant ou le fondu sortant dès que vous cliquez sur

Question

J'essaie de redresser un script pour une fenêtre contextuelle de notification. Je ne veux pas que le popup disparaisse après X secondes ou fadeout lorsque l'utilisateur clique sur le message. Je peux obtenir les deux effets individuellement, mais quand j'essaie de les combiner, fadeOut fonctionne. Ceci est mon code à ce jour:

function notify(data, type) { 
switch(type) { 
case "success": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifySuccess') 
    .click(function() { 
$("#notify").fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
case "error": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifyFailure') 
    .click(function() { 
$("#notify").fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
} 
} 

Answer 1

Vous avez besoin d'un .stop() là pour effacer le retard de la file d'attente, comme ceci:

function notify(data, type) { 
switch(type) { 
case "success": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifySuccess') 
    .click(function() { 
    $("#notify").stop(true, true).fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
case "error": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifyFailure') 
    .click(function() { 
    $("#notify").stop(true, true).fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
} 
} 

En outre, si vous avez seulement success et error pour les types , vous pouvez réduire cela beaucoup, comme ceci:

function notify(data, type) { 
$('#notify').html(data) 
    .removeAttr("style") 
    .addClass(type == 'success' ? 'notifySuccess' : 'notifyFailure') 
    .delay(5000).fadeOut() 
    .click(function() { 
    $(this).stop(true, true).fadeOut(); 
    }); 
} 

Answer 2

essayez de mettre .stop();

.click(function() { 
    $("#notify").stop(true,true).fadeOut(); // also in this part, you may change $("#notify") to $(this) 
})