requête J: Arrêter fade out « message » de la souris (vol stationnaire) qui est fondu dans

Question

<script> 
$(document).ready(function() { 
var messages = [ 
     <?php foreach ($offer as $off) { ?> 
     [ '<?php echo $off->id; ?>','alert-success-notify_btn','<?php echo $off->description; ?>' ], 
     <?php } ?> 
    ]; 
    for(i=0;i<messages.length;i++){ 
     var message = messages[i]; 
     $('.notify-message').append('<div id="'+message[0]+'" class="alert '+message[1]+' notify2"><button type="button" class="close">×</button>'+message[2]+'</div>'); 
     $('#'+message[0]).delay(i * 1).fadeIn("slow"); 
     $('#'+message[0]).delay(i * 3000 + 2000).fadeOut("slow"); 
    } 
    $(document).on('click', '.close', function() {$(this).parent().hide();}); 
}); 
</script> 

Dans ce message de code se dissipera automatiquement pendant quelques secondes et se fanent automatiquement après quelques secondes sont plus, je veux arrêter fanent un message sur la souris sur (vol stationnaire).

Answer 1

C'est assez straightfoward, ce que vous voulez faire est:

1. magasin l'état si un élément a été plané au-dessus de l'objet .data() de l'élément
2. Vous pouvez alors vérifier si cet élément a été planait au-dessus, avant de vous décider si vous voulez fade out

Sans connaître votre balisage, voici ce qui peut être fait:

for(i=0;i<messages.length;i++){ 
    var message = messages[i]; 
    $('.notify-message').append('<div id="'+message[0]+'" class="alert '+message[1]+' notify2"><button type="button" class="close">×</button>'+message[2]+'</div>'); 

    // Cache message 
    var $message = $('#'+message[0]); 

    // Fade in message 
    $('#'+message[0]).delay(i * 1).fadeIn("slow"); 

    // Fade out message conditionally 
    if ($message.data('hovered')) 
     $('#'+message[0]).delay(i * 3000 + 2000).fadeOut("slow"); 
} 

// Messages are identified with the class `.notify2` as per your markup 
// We update the hovered key in the data object of the message onMouseEnter 
$(document).on('mouseenter', '.notify2', function() { 
    $(this).data('hovered', true); 
});