JQuery Mobile Panel No Transition

Question

I copied the demos almost exactly, but my panel doesn't slide in...it just pops up as an overlay. I'm using JQM 1.4.1 and PhoneGap.

<div data-role="panel" id="nav-popup-menu" data-position="left" data-transition="slide" data-display="overlay" data-dismissible="true">
  <button class="search">Search</button>
</div>

.ui-panel {
  background-color: rgba(0,0,0,0.5) !important;
  width: 200px;
}

<a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>

Any ideas?

Answer 1

<div data-role="panel" id="nav-popup-menu" data-position="left"  data-display="push">
  <button class="search">Search</button>
</div>

<a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>

Remove data-transition from the property . And set data-display push . Here is Fiddle

Are you looking for same ?