显示隐藏文本与淡入淡出效果以及背景div？

Question

单击主文本时我应用了淡入淡出效果.但是它背后的div在
效果期间有点粗糙.隐藏文本显示为淡入效果,但div不显示.
如何使div与文本一起淡出.这是小提琴.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()

编辑:如果你想同时使用淡入淡出和滑动,你需要使用另一个包装器.编辑小提琴