javascript - 显示带有淡入淡出效果的隐藏文本以及背景 div？

Question

我在单击主文本时应用了淡入淡出效果。但它背后的 div 在效果期间
有点粗糙。隐藏的文本以淡入效果出现，但 div 没有。
如何让div随着文字淡出。这是 fiddle 。 http://jsfiddle.net/BreMW/826/

$(document).ready(function(){
    $(".toggle").click(function(){
       $(this).find(".hide").fadeToggle();
    });
});

.hide {
  display: none;
}
@import url(https://fonts.googleapis.com/css?family=Questrial);

   .spcredit{
    color:#666666;
    font-family: 'Questrial', sans-serif;
    text-transform:uppercase;
    font-size:9px;
    }
.category {
width:440px;
padding-top:10px;
margin-bottom:40px;
background:white;
text-align:justify;
box-shadow:0px 3px 10px rgba(0,0,0,.15)
}

<div class="category" style="line-height:150%;"><center>


<div class="spcredit">
<div class="toggle"><a href="javascript:void(0);">text1</a>
<div class="hide">
hidden text1
</div></div>

</div>

由于某些奇怪的原因，它在预览中不起作用。这是 FIDDLE.

Answer 1

使用 slideToggle() 代替 fadeToggle()

编辑:如果你想同时拥有淡入淡出和滑动，你需要为此使用另一个包装器。已编辑 fiddle