<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
{margin:0; padding:0;}
.btn{ display:block; width:100px; line-height:20px; text-align:center; background:#9CF; color:#F93;}
.d1{ width:100px; height:500px; border:1px solid #cccccc; margin-bottom:20px;}
.d1 p{ line-height:30px; text-align:center; cursor:pointer;}
.d2{width:100px; height:500px; border:1px solid #cccccc; margin-bottom:20px;}
/.d2 p{ opacity:0;}*/
.cur{ background-color:#CC99CC;}
</style>
<body>
<a href="javascript:;" class="btn">点击添加</a>
<div class="d1">
<p >清白之年0 </p>
<p>清白之年1</p>
<p>清白之年2</p>
<p>清白之年3</p>
</div>
<div class="d2">
</div>
<script>
$(".d1 p").click(function(){
$(this).addClass("cur").siblings().removeClass("cur")
})
$(".btn").click(function(){
var text=$(".cur").text()
var $p=$('<p>'+text+'</p>')
$(".d2").append($p.hide().fadeIn(300))
})
</script>
</body>
摘自：http://www.cnblogs.com/lovebing/p/6649973.html
Append 后如何使用 fadein淡入效果
Append 后如何使用 fadein
先隐藏才能显示！代码如下：
$('ul.getlist').append(list).hide().fadeIn('slow');
list 是已经处理好要拼接的内容
仔细研究之后：
$('ul.getlist').append($(list).hide().fadeIn(1000));
这样做才是最好的！
或者用这种：
$('#thumbnails').append('<listyle="display:none"><imgsrc="/photos/t/'+data.filename+'"/></li>').children(':last').hide().fadeIn(2000);
网友评论