title: Faded text not reappearing
body: <p>I'm working on a random wiki viewer, and its been a slog, but i'm finally at the point where i think that at least the UI's functionality is done. The only problem is that after i fade some text on the "random" button, and replace it with an iframe which is then removed when the button is clicked again, the text doesn't seem to fade back in. Any ideas?</p>
  
  <p><a href="https://codepen.io/EpicTriffid/pen/WOYrzg" rel="nofollow noreferrer">https://codepen.io/EpicTriffid/pen/WOYrzg</a></p>
  
  <pre><code>$(document).ready(function() {
  
    //Random Button
  
    var but1status = "closed"
    var randFrame = ("#randframe")
  
    $(".button1").on("click",function () {
      var but = $(".button1");
      var cross = $("#cross1");
      but.animate({marginTop:"10%", width:"100%", height:"100vh"}, "fast");
      $(".b1text").animate({opacity:0});
      cross.delay(1000).fadeIn();
      but1status = "open"
      if (but1status == "open") {
        setTimeout(randFrame,1000)
        function randFrame (){
          $(".button1").html("&lt;iframe class='randframe' src='demo_iframe.htm' height='100%' width='100%' style='border:none'&gt;&lt;/iframe&gt;");
          $("#cross1").click(function() {
            $('.button1').removeAttr('style');          
            $("#cross1").fadeOut('fast');
            $('.randframe').remove();
            $(".b1text").animate({opacity:"1"});
          });
        };
      };
    });
  </code></pre>