title: how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?
body: <p>I know that I can fade in and out with jquery, but on mobile it will be jittery and like low fps or something. After a lot of searching I've found out I can use css3 transition to go to opacitiy 0, but the problem is the element will still have the place to itself. even with visibility:none, it will keep the space it was in. the only way is to use display:none but as I know I can't animate that.
  So is there a way to achieve smooth fade in and out animation on mobile with a combination of jquery and css3? or even just one? Thank you.</p>
  
  <p><code>**EDIT**</code>: Okay the answer for fadeout is working pretty well, now a fade in would be sweet. the problem is I think I have to pul a millisecond delay after <code>('#id').css('display','block')</code> and before <code>('#id').css('opactity','1')</code>. don't if it is efficient and all. but it works that way but all my other animations wouldn't work. still am really confused.</p>