title: Changing opacity using jQuery doesn't work in Chrome or Safari without screen refresh
body: <p>I wish to show/hide content on click, and am setting the CSS opacity rather than using <code>toggle()</code> or <code>hide()</code> and <code>show()</code> as I wish to have the content still occupy space on the page.</p>
  
  <p>Here is the problem page (click the wee button in the top right to hide/show content): <a href="http://indigobrazilianportuguese.com/about-us/" rel="nofollow">http://indigobrazilianportuguese.com/about-us/</a></p>
  
  <p>And the jQuery:</p>
  
  <pre><code>$('.close').toggle(function() {
      $(this).siblings('p').text('Show content');
      $('#container').css('opacity', 0);
      $('#footer-container').css('opacity', 0);
  }, function() {
      $(this).siblings('p').text('Show image');
      $('#container').css('opacity', 1);
      $('#footer-container').css('opacity', 1);
  });
  </code></pre>
  
  <p>Works ok in Firefox and Opera, but not Chrome or Safari.</p>
  
  <p>In Chrome and Safari the screen needs to be refreshed for it to work (e.g. when I resize the browser window the content is shown/hidden) although on other pages on the site the same button works fine...</p>
  
  <p>Also tried adding adding/removing classes to apply the CSS opacity changes with no luck.</p>
  
  <p>Any tips? Open to using an alternative to CSS opacity. Thanks!</p>