jquery - J query: Stop fade Out 'message' on mouse over(hover) which is fade in -
<script> $(document).ready(function () { var messages = [         <?php foreach ($offer $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> in code message automatically fade in seconds , automatically fade out after seconds over, want stop fade out message on mouse over(hover).
that's pretty straightfoward, want is:
- store state if element has been hovered on in .data()object of element
- you can check if element has been hovered over, before decide if want fade out
without knowing markup, here can done:
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 identified class `.notify2` per markup // update hovered key in data object of message onmouseenter $(document).on('mouseenter', '.notify2', function() {     $(this).data('hovered', true); }); 
Comments
Post a Comment