jQuery淡入淡出瞬態元素

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與id="result-message"將包含一個內部<div class="transient-warn-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