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。我已经包含了UI Effects Core。

Answer 1

如果您使用css，那么您的动画可能会被破坏：

.accordion_item_content { height: auto !important; }

因为在这种情况下，该元素无法设置动画（您可以覆盖所有更改）。在这种情况下，您应该使用选项autoHeight：true in accordion。

Answer 2

我使用你的代码制作了一个小提琴，但幻灯片效果看起来像正在正确触发： http://jsfiddle.net/Xzjum/

你可以包含你的CSS，也许有影响幻灯片动画的东西吗？

jQuery UI Accordion - 动画不起作用

2 个答案: