php页面滑动效果,jQuery+Ajax结果用prepend实现淡入及滑动效果

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。由于其可以减少服务器请求并能提升用户体验，现在很多地方都在用。

这两天做一个Ajax评论的时候，用 prepend() 方法把结果直接插入到页面上，虽然可以实现功能，但是页面直接多出这么一块东西，效果不是很好，所以就想用 fadeIn() 方法或 slideDown() 方法来把结果展现出来，但是发现直接在 prepend() 方法后接上 fadeIn() 并不管用。

后来发现在调用 prepend() 方法的时候，结果其实本身已经是显示状态了，所以 fadeIn() 方法起不到作用。解决办法是在 prepend() 之前让结果先隐藏，即加上一个 hide() 方法。

var response = '

This is a additional line !';

$('.b1').click(function(){

$(response).hide().prependTo($('.list-group')).fadeIn('slow');

//或者 $('.list-group').prepend($(response).hide().fadeIn('slow'));

})

更多效果，请参看

PS：常见错误

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