title: jQuery animate "display: none"
body: <p>I'm having a problem creating a smooth transition/animation using jQuery. Been busy with this for a while now, tried googling it.</p>
  <p>I have a page with 4 tiles, if a tile is selected (like it already is in the example), all the tiles &quot;close&quot; and a div next to the selected tile becomes visible, the div <code>content_container</code>. The tiles are made out of <code>class=&quot;tile&quot;</code> and if closed <code>class=&quot;tile closed&quot;</code>. When i hover over a tile, it expands to it's original form.</p>
  <p>When clicked on a tile, the content_container should close again and the tiles should expand back to their original forms before redirecting to selected URL. The tiles work good, however I'm having trouble with the content_container. I tried to animate close it by setting <code>transition</code> rules in css and on click changing the <code>width=0</code> and <code>height=0</code> of the div. However it seems to ignore it/staying the same width. Then I tried to set <code>display: none</code>. Which works, but it doesn't animate it, the content_container just <strong>disappears</strong> which is not the desired effect.</p>
  <p>Using google I found an answer which said to first animate <code>opacity: 0</code> before setting <code>display: none</code>. This is not a solution to my problem, because it will still take up all the space, while the tiles also expand, making the two right tiles fall off screen.</p>
  <p>Does anybody know how to animate display none? And/or why is it ignoring <code>width = 0</code>, because if that works it should also animate it right?</p>
  <p>JSFiddle: <a href="http://jsfiddle.net/RE5hF/10/" rel="nofollow noreferrer">http://jsfiddle.net/RE5hF/10/</a></p>
  <p>Thanks in advance!</p>
  <hr />
  <h2>EDIT 1</h2>
  <p>I think the simple solution would be to just change the width, so I've tried to use this:</p>
  <pre><code>$(&quot;#container&quot;).on('click', 'a', function() {
      $('.not_hidden').css({&quot;width&quot;:&quot;0px !important&quot;});
      $('.content_container').css({&quot;width&quot;:&quot;0px !important&quot;});
  }); 
  </code></pre>
  <p>But on click the code just gets completely ignored, if I put some other code in it like <code>$('.tile').removeClass('closed');</code> the tile's class does change, so the 'click function' is working. Just changing the width on the containers doesn't work. Can't seem to find out why.</p>
  <hr />
  <h2>EDIT 2</h2>
  <p>FIXED</p>
  <p>Code was conflicting with <code>.hover()</code> code, width was changing of the container but immediately set back to different width because of the <code>hover()</code> code. Ended up adding another class for the <code>content_container</code>, put it in the <code>hover code</code> and use <code>.remove()</code> to remove the class on click of <code>a</code>. This way the <code>.content_container.css('width':'0px')</code> wasn't conflicting with the <code>.hover()</code> code anymore.</p>
  <p>working: <a href="http://jsfiddle.net/RE5hF/14/" rel="nofollow noreferrer">http://jsfiddle.net/RE5hF/14/</a></p>