动画触发slideToggle的.hide（）部分，但不触发.show（）部分

Question

  

当我在元素上使用.slideToggle时，它不会显示动画   对于“show”事件，但它确实为“隐藏”部分做了一个动画   切换。

我希望这不是一个愚蠢的问题，但我一直在寻找，我找不到答案。我只是在学习Jquery，如果我犯了一个简单的错误，请原谅我。

This其他帖子提出了类似的问题，但定义（幻灯片切换：动画切换：没有动画）似乎不起作用。

这是J小提琴：

http://jsfiddle.net/9jUNS/

谢谢你看看！ - 尼克

Answer 1

这适用于编辑JSFiddle

$(document).ready(function() {    
    $('div.demo').children('span').hide(700);  
                              $('div.demo h3').click(function() {
                                $(this).next().slideToggle(700);
                              });

    });

看起来你的“.hide（）”覆盖了slideToggle提供的行为。

Answer 2

问题出现了，因为jQuery为span元素设置动画的方式导致布局采用跨度的默认内联呈现并使用绝对定位和块布局显示它。

将CSS更新为以下内容：

.demo span {
    margin: 10px;
    display: inline-block;
    overflow: hidden;
}

这应该纠正定位和布局，让jQuery正确地为元素设置动画。