jQuery UI Accordion - анимация не работает

Question

Спасибо за вашу помощь заранее.

Я использую аккордеон jQuery UI, и я хотел бы, чтобы там была анимация, но по какой-то причине она не работает. Любая идея почему? аккордеон div просто появляется и исчезает. Вот мой код:

 <!-- creates accordion where records can be entered --> 
        <script type="text/javascript"> 

     $(document).ready(function(){ 

      $("#tracking-record-menu").accordion({ 
       collapsible: true, 
        header: '.record-item', 
       active: false, 
       animated: 'slide' 
      }); 

          }); 

        </script>  

      <!--######### contains tracking record buttons ######## --> 
       <div id="tracking-record-container"> 
      <ul id="tracking-record-menu"> 

<li class="record-section"><span class="record-section-text">Body Metrics</span></li> 

<li class="record-item"><div class="record-item-div"><span class="record-text">Distance</span></div></li> 

        <div class="tooltip-record"> 
        <form id="distance_graphtracker" method="post" action=""> 
        <label for="distance-log-id">Distance</label> 
     <input type="text" name="distance_log" id="distance-log-id" /> 
        <button type="submit" name="submit_distance" >Record</button> 
        </form> 
        </div> 

<li class="record-item"><div class="record-item-div"><span class="record-text">Time</span></div></li> 

        <div class="tooltip-record"> 
        <form id="time_graphtracker" method="post" action=""> 
        <label for="time-log-id">Time</label> 
      <input type="text" name="time_log" id="time-log-id" /> 
        <button type="submit" name="submit_time" >Record</button> 
        </form> 
        </div> 

</ul> 
</div> 

P.S. Я включил ядро ​​эффектов эффектов.

Answer 1

Я сделал скрипку, используя свой код, но эффект слайд выглядит он правильно стрельбы: http://jsfiddle.net/Xzjum/

Вы можете включать в свой CSS, может быть, есть что-то осуществление слайд-анимации?

Answer 2

Ваша анимация может быть нарушена, если вы используете CSS, как:

.accordion_item_content { height: auto !important; } 

Потому что в этом случае этот элемент не может быть анимированной (переопределить все изменения). В этом случае вы должны использовать опцию autoHeight: true в аккордеоне.