page part transitions

page part transitions

Hey,

i have

an Accordion and want to change in the second area the steps. I use the normal jQuery function fade but it don’t work smooth on mobile devises. Faithfully i want to use the transition effect from jQuery Mobile slide but i don’t know how.

JavaScript:
  1.  $('#step1').fadeOut(500);
  2.  $('#step2').delay(500).fadeIn(500);
HTML:
  1. <div data-role="page" id="page1">
  2.     <div data-role="content">
  3.         <div data-role="collapsible-set" data-theme="b" data-content-theme="c">
  4.             <div data-role="collapsible" data-collapsed="false">
  5.                 <h3>first</h3>
  6.                 ....
  7.             </div>
  8.             <div data-role="collapsible" data-collapsed="true">
  9.                 <h3>second</h3>
  10.                     <div id="step1">
  11.                         Part 1
  12.                     </div>
  13.                     <div id="step2">
  14.                         Part 2
  15.                     </div>
  16.                     <div id="step3">
  17.                         Part 3
  18.                     </div>
  19.             </div>
  20.             <div data-role="collapsible" data-collapsed="true">
  21.                 <h3>third</h3>
  22.                 ....
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>

Please help me.



    • Topic Participants

    • info