title: how to show iframe with JQUERY
body: <p>I make a simple project where I would like show iframe with method <code>.show()</code> of jQuery, I show on main site of jQuery and I try to do this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    // run the currently selected effect
    function runEffect() {
      // get effect type from
      var selectedEffect = $( "#effectTypes" ).val();
  
      // most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 100 };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 280, height: 185 } };
      }
  
      // run the effect
      $( "#effect" ).show( "blind", options, 500, callback );
    };
  
    //callback function to bring a hidden box back
    function callback() {
      setTimeout(function() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
      }, 1000 );
    };
  
    // set effect from select menu value
    $( "#button" ).click(function() {
      runEffect();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="css/style.css"/&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;div align="center"&gt;&lt;b&gt;Sorveglianza RaspiCam&lt;/b&gt;&lt;/div&gt;
  
  &lt;div id="effect" class="sorv"&gt;
    &lt;iframe src='http://www.sito.it' width='1024' height='640'&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;button id="button" class="ui-state-default ui-corner-all"&gt;Run Effect&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the button don't work and iframe is ever visible, where I wrong?
  thanks,
  Daniel.</p>