AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。由于其可以减少服务器请求并能提升用户体验,现在很多地方都在用。
这两天做一个Ajax评论的时候,用 prepend() 方法把结果直接插入到页面上,虽然可以实现功能,但是页面直接多出这么一块东西,效果不是很好,所以就想用 fadeIn() 方法或 slideDown() 方法来把结果展现出来,但是发现直接在 prepend() 方法后接上 fadeIn() 并不管用。
后来发现在调用 prepend() 方法的时候,结果其实本身已经是显示状态了,所以 fadeIn() 方法起不到作用。解决办法是在 prepend() 之前让结果先隐藏,即加上一个 hide() 方法。
var response = '<li class="list-group-item">This is a additional line !</li>'; $('.b1').click(function(){ $(response).hide().prependTo($('.list-group')).fadeIn('slow'); //或者 $('.list-group').prepend($(response).hide().fadeIn('slow')); })
更多效果,请参看 实例 (实例只实现效果,没有具体 Ajax 代码)。
PS:常见错误
有时候容易写成 $('.list-group').prepend($(response)).fadeIn();
这是错误的,因为这个是为 $('.list-group')
添加了 fadeIn()
效果而非给 $(response)
添加。
孤独的坚持者 2014/11/20 15:34
好技巧 感谢分享
林敬雄 2014/11/20 16:45
感谢分享
胖瓜 2014/11/21 01:49
博主,你的这页缩略图怎么看不到啊?也挂了?
Specs 2014/11/21 08:29
@ 我的可以呀
胖瓜 2014/11/21 09:11
好吧,昨晚我手机上看的,发现没有东西,电脑上就正常了
我买得起 2014/11/24 13:43
博客不错。来学习了。也帮您添点人气。有空来我这边逛逛喔。
厦门微信营销代运营 2014/11/25 11:26
JQ还看不怎么懂 要去看了
Specs 2014/11/25 16:02
@ jQuery 比 JS 好学~
同盟源 2015/01/21 13:16
我来学习了
哈哈哈哈 2016/12/29 10:10
你好,我要进行无限追加,用你这种方法,会把所有追加进来的全部出现淡入效果,这样不行啊
Specs 2017/01/11 21:59
@ 可以追加一个写一个啊