console
$(".flip").click(function(){
$(".panel").slideToggle(5000);
});
$("#stop").click(function(){
$(".panel").stop();
});
<p><a class="btn btn-primary btn-lg" href="http://jsrun.net/GDkKp/show" role="button">返回首页
</a></p>
<p class="flip">木之本樱</p>
<div class="panel">
<p>木之本樱，是日本动漫《魔卡少女樱》中的主角。她有着樱花般烂漫笑颜的女孩，纯净而美丽，明媚如阳光。喜欢甜食和有趣的事物，有着怕鬼的可爱性格，深受人们的喜爱。</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494261154220&di=8e39cc05747b560908390baf517718c7&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D67f19bb8b912c8fcb4f3f6c5cc0292b4%2Fbae7a03eb13533fa97f17ab6a8d3fd1f40345ba6.jpg"
alt="通用的占位符缩略图" style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494261154215&di=b1b88db89cfe77c9366383c12d960d88&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F04%2F20160804000529_WVxLJ.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494261154210&di=b7f35e41dd31a5d9bc0f1a96f0d206ff&imgtype=0&src=http%3A%2F%2Fwww.005.tv%2Fuploads%2Fallimg%2F160916%2F22-1609161A043458.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494261154151&di=14334ccc77062f0e58709f1c78a2a54e&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201606%2F23%2F20160623113006_GM3Wj.thumb.700_0.png"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
</div>
<p class="flip">李小狼</p>
<div class="panel">
<p>李小狼，日本漫画《魔卡少女樱》的男主角。为收复库洛牌从香港转学到日本上学，成为木之本樱的对手，两人竞争收集库洛牌，后相互帮助，并渐渐喜欢上小樱。</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262072446&di=709ea958967ea32d9a62f638031a0438&imgtype=0&src=http%3A%2F%2Fi132.photobucket.com%2Falbums%2Fq38%2Fpai861207%2F4-2.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494261968206&di=2d7230f1fe781a99809a3a970996eaee&imgtype=0&src=http%3A%2F%2Fcdn.clickme.net%2FGallery%2F2016%2F10%2F13%2F663fb93f8203fe47eadd7b7c1cd788d5.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262195618&di=89d8324a4c04917163293c7bbe7caf18&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201601%2F24%2F20160124161252_u4iCW.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262317324&di=1e84e9cb62f8ee6ecba70ab1553e9f5d&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F9f510fb30f2442a75d08954ed643ad4bd01302d2.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
</div>
<p class="flip">大道寺知世</p>
<div class="panel">
<p>大道寺知世是大道寺集团的社长千金，是木之本樱的母亲木之本抚子的堂姐大道寺园美的女儿。夜深时会有保镖护送回家。同时她也是友枝小学的学生，三年级起与小樱同班。首先知晓小樱在收集库洛牌的人之一。
知世的父亲未在作品中露面，保持着神秘的形象。</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262445443&di=d4f1e287016ce4b10f648de78f4d2e59&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201605%2F20%2F20160520195448_c3VJY.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262554650&di=f7b5a198e3aedd39f63bfe02b3ac7dd5&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201510%2F28%2F20151028202150_rnYEt.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262696865&di=673925a9338738ffb9e0e997179b710c&imgtype=0&src=http%3A%2F%2Ffa.topitme.com%2Fa%2Fb4%2F31%2F113316677759a31b4ao.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494262696857&di=ec2666b0df515df4777807c64726e386&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201506%2F03%2F20150603233624_MK5iG.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
</div>
<p class="flip">桃失、雪兔加小可</p>
<div class="panel">
<p>小樱的哥哥，就读星条高中，与月城雪兔是好朋友，木之本樱的亲哥哥。</p>
<p>库洛牌的另一个守护者，月城雪兔的真实身份。月是和可鲁贝洛斯配对的存在，月代表月亮，可鲁贝洛斯代表太阳，同样也是大魔法师库洛里多(剧场版为库洛里德)所创造的库洛卡守护者。</p>
<p>守护装有“库洛牌”的书的“封印之兽”。昵称小可。是个贪吃鬼。</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494263348268&di=79ecb230a49a5d3bc62a353966ca53f5&imgtype=0&src=http%3A%2F%2Fwww.5068.com%2Fuploads%2Fallimg%2F130316%2F14003232Z-0.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494263461397&di=79c85d26973e00772b99cffaafca3294&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201204%2F08%2F20120408125324_wUVPT.thumb.700_0.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494263720997&di=d4c7c8e35300bd2a51a9d8fd5b7e4eeb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Ff31fbe096b63f624297609b28744ebf81a4ca353.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494263837922&di=d36afcf3354e89aa6b72ebb72a95f27c&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201510%2F07%2F20151007165754_SBihu.jpeg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
</div>
<p class="flip">人物大混杂</p>
<div class="panel">
<p>木之本樱，是日本动漫《魔卡少女樱》中的主角。她有着樱花般烂漫笑颜的女孩，纯净而美丽，明媚如阳光。喜欢甜食和有趣的事物，有着怕鬼的可爱性格，深受人们的喜爱。</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264145193&di=e82fef088ed386065182c2f3903bcb95&imgtype=0&src=http%3A%2F%2Ff4.topitme.com%2F4%2F33%2F27%2F11088048407e927334o.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264145183&di=d2356549642eabc8c02cb4038b42e324&imgtype=0&src=http%3A%2F%2Fc3.silentcache.com%2Fuserfiles%2Farticle%2F41%2F2014-06%2F4ujfa2tv.png"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264370341&di=a385b560305a88722d4e59b3127ccf49&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_3_1826129084D1397855737_23.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494264815278&di=c9df1e9e894898225c856ebfa13ae00f&imgtype=0&src=http%3A%2F%2Fpic35.photophoto.cn%2F20150425%2F0005018791227398_b.jpg"
alt="通用的占位符缩略图"style="width:220px;height:220px;"/class="img-circle">
</a>
</div>
</div>
body{
background-image:url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1493815297&di=14f48fa95b1478e762bc00c22beb03d0&src=http://pic101.nipic.com/file/20160620/23241023_143236513000_2.jpg);
}
div.panel,p.flip
{
width:90%;
margin:auto;
padding:5px;
text-align:center;
background:pink;
border:solid 1px #c3c3c3;
}
div.panel
{
height:100px;
display:none;
}