乌徒帮技术范儿技术中心Ajax › jquery通过ajax追加信息时逐渐显示效果

jquery通过ajax追加信息时逐渐显示效果

分类:Ajax,jQuery

我们希望将$.ajax获得的返回信息添加到某个元素内最前面,并有一个渐渐显示的效果,这是一个小技巧,我们需要用到prependTo和fadeIn。

例如我们在使用ajax获得的返回信息为data,我们第一步要做的是先在本地构建一组html代码,如下:

$html = '<li><a href="' + data.url + '">' + data.name + '</a></li>';

这是由json返回的信息,你也可以直接用dataType:html,data这是返回的html代码了。

接下来是对象化并追加到原有的<ul>中,代码如下:

$($html).prependTo('<ul>').fadeIn();

如此简单就完成了追加时的渐现效果,不过等一下,效果似乎并不如想象的那样,反思一下,这中间似乎好像还有一点问题。prependTo追加之后再执行fadeIn是否有效果呢?答案是没有,因此,我们要将$html先作隐藏处理,如下:

$html = '<li style="display:none;"><a href="' + data.url + '">' + data.name + '</a></li>';

如此一来,这一切就成功了。不信,你可以试试看。

填写个人信息,赶快回复吧!