Question

我有一个页面，如果发生某些事情，会出现一些div。通常，那些div是瞬态状态消息。

我希望这些消息在延迟一段时间后消失。我试过了

<div id="result-messages"></div>
<script>
$(document).ready(function() {
  // fade out flash 'success' messages
  $('.transient-warn-message').delay(1000).fadeTo(1000,0,function(){$(this).html('');});
});
</script>

如果带有div的{{1}}将包含内部id="result-message"，则它不会消失......

Answer 1

您可以使用MutationObserver - supports only modern browsers

jQuery(function ($) {
    function warnOut() {
        if ($('#result-messages .transient-warn-message').length) {
            // fade out flash 'success' messages
            $('.transient-warn-message').delay(1000).fadeTo(1000, 0, function () {
                $(this).html('');
            });
        }
    }

    warnOut();


    // select the target node
    var target = document.querySelector('#result-messages');

    // create an observer instance
    var observer = new MutationObserver(function (mutations) {
        if ($('#result-messages .transient-warn-message').length) {
            warnOut();
        }
    });

    // configuration of the observer:
    var config = {
        attributes: true,
        childList: true,
        characterData: true
    };

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

    // later, you can stop observing
    //observer.disconnect();
});

演示：Fiddle

jQuery淡出瞬态元素

1 个答案: