title: Fading in text with jQuery
body: <p>Is there a way to fade in the text when it changes?  I'm using jQuery's html() function.  I attempted doing it with fadeOut(), but now it's going back and forth between the fadeIn and fadeOut.</p>
  
  <p>Please let me know if there's a better way to do this, does the constant check  on browser resize worse than detect if width is a certain size?</p>
  
  <p><a href="https://jsfiddle.net/jzhang172/uhmubhtf/2/" rel="nofollow">https://jsfiddle.net/jzhang172/uhmubhtf/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    function screenClass() {
    
    if ($( window ).width() &lt;500){
  $(".ok span").html("no");
  }
  else{
  $(".ok span").fadeOut();
  $(".ok span").fadeIn().html("yes");
  }
  
    }
    $(window).bind('resize',function(){
    screenClass();
    });
    
    
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ok{
    background:blue;
    height:300px;
    width:300px;
    transition:1s;
    font-size:30px;
    color:white;
  }
  .span{
    color:white;
    font-size:30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="ok"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>