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>

在此代码消息中，消息将自动淡入几秒钟并在秒数结束后自动淡出，我想在鼠标悬停时停止淡出消息（悬停）。

Answer 1

这是非常直接的，你想要做的是：

如果元素已在元素的.data()对象中悬停，则存储状态
然后，您可以在决定是否要将其淡出之前检查此元素是否已悬停在上面

在不知道您的标记的情况下，可以采取以下措施：

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

J查询：停止淡出＆＃39;消息＆＃39;鼠标悬停（悬停），淡入淡出

1 个答案: