title: how to use attributes to show-hide elements with CSS3 transitions?
body: <p>I'm using CSS3 transitions like this:</p>
  
  <pre><code>if( pop.attr('status') == 'visible' ) {
      pop.attr('status', 'hidden')            
          // pop transition - class of "pop" was added when showing the element
         .addClass('reverse out')
         .hide('fast')                    
     }
  
  // clean up pop() transition 
  window.setTimeout( function() {
     pop.removeClass('reverse out pop');
     }, 350); 
  </code></pre>
  
  <p><strong>Question:</strong><br>
  Is there a way to handle visiblity through the status attribute AND STILL have the CSS3 transition? I'd rather use some CSS rule like so:</p>
  
  <pre><code>pop[status="hidden"]   { display: none; }
  pop[status="visible"]  { display: block; }
  </code></pre>
  
  <p>than using hide() and show(), because I'm sometimes ending up having visible elements with status set to <em>hidden</em>, which fails my script</p>
  
  <p>Using only status to determine visiblity thus makes more sense (and less confusion) for me. </p>
  
  <p>Thanks for some input!</p>
  
  <p><strong>EDIT</strong>:<br>
  I'm showing the element like this:</p>
  
  <pre><code>    pop.attr('status','visible')         
          // pop() transition
          .addClass('ui-panel-active pop in')
          .show('fast')
  
      // clean up pop transition
      window.setTimeout( function() { 
         $popPanel.removeClass('in');
         }, 350);                                        
  </code></pre>
  
  <p><em>Status</em> is an attribute I assign to the element to monitor whether it's visible or not. I'm using the CSS3 transitions from Jquery Mobile. Let me know if should also post these.</p>
  
  <p>Thanks for help.</p>
  
  <p><strong>EDIT 2:</strong>
  Here is a jsfiddle - <a href="http://jsfiddle.net/hDGVZ/9/" rel="nofollow">http://jsfiddle.net/hDGVZ/9/</a></p>