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