首页 » Web技术 » JS/jQuery » 正文

jQuery+Ajax结果用prepend实现淡入及滑动效果

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 代码)。

ajax淡入

PS:常见错误

有时候容易写成  $('.list-group').prepend($(response)).fadeIn(); 这是错误的,因为这个是为 $('.list-group') 添加了 fadeIn() 效果而非给 $(response) 添加。

本文共 11 个回复

  • 孤独的坚持者 2014/11/20 15:34

    好技巧 感谢分享

  • 林敬雄 2014/11/20 16:45

    感谢分享

  • 胖瓜 2014/11/21 01:49

    博主,你的这页缩略图怎么看不到啊?也挂了?

  • 胖瓜 2014/11/21 09:11

    好吧,昨晚我手机上看的,发现没有东西,电脑上就正常了

  • 我买得起 2014/11/24 13:43

    博客不错。来学习了。也帮您添点人气。有空来我这边逛逛喔。

  • 厦门微信营销代运营 2014/11/25 11:26

    JQ还看不怎么懂 要去看了

  • 同盟源 2015/01/21 13:16

    我来学习了 :lol:

  • 哈哈哈哈 2016/12/29 10:10

    你好,我要进行无限追加,用你这种方法,会把所有追加进来的全部出现淡入效果,这样不行啊

发表评论