使用fadeIn()添加html以淡入
append html to fade in using fadeIn()
我不能让附加到$('ul#posts')
的<li>
元素淡出。
我尝试过的事情。
-
设置
<li>
的display:none
,然后渐入。附加的html在请求之后是不可见的。这意味着fadeIn()不起作用 -
$(wall_post).appendTo('ul#posts').fadeIn("slow");
似乎也不起作用
代码:
var wall_post = '<li> <img src="image/avatar.jpg" class="avatar"><div class="status"><h2><a href="#" target="_blank">disran</a></h2><p class="message">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div></div> </div><p class="likes">5 hours ago · 100 Likes </p></li>';
var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "GET",
url: "insert.php",
data: "message_wall=" + wall_post,
success: function () {
//$('ul#posts').append(wall_post).fadeIn('slow');
//$(wall_post).appendTo('ul#posts').fadeIn("slow");
$('ul#posts').append(wall_post).fadeIn('slow');
}
});
<li>
<img src="image/avatar.jpg" class="avatar">
<div class="status">
<h2><a href="#" target="_blank">disran</a></h2>
<p class="message">[.. textarea_content ..]</p>
[.. image_html ..]
<div class="data">
<p class="name">
<a href="[.. siteurl ..]" target="_blank">[.. sitetitle ..]</a>
</p>
<p class="caption">[.. siteurl ..]</p>
<p class="description">[.. sitedesc ..]</p>
</div>
</div>
<p class="likes">5 hours ago 100 Likes</p>
</li>
您现在使用字符串来处理,不总是工作。所以我要做的就是把它变成这样的对象:
var wall_post = $('<li>[.. rest of html structure ..]</li>');
var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "GET",
url: "insert.php",
// why are you sending the wallpost?? why getting you HTML from PHP??
// but i think its the message_wall variable you ment?
data: "message_wall=" + wall_post,
success: function () {
$('ul#posts').append(wall_post)
wall_post.hide(); // instant hide the wall_post
wall_post.fadeIn('slow'); // let is fadein slow
}
});
在应用fadeIn操作之前,您必须使隐藏或显示:none的wall_post。使用此操作
$('ul#posts').append(wall_post).hide('fast').fadeIn('slow');
这里是jsfiddle链接http://jsfiddle.net/gagan/M22EQ/
更新:
这比以前更合适,jsfiddle link
$('ul#posts').append($(wall_post).hide().fadeIn('slow'));
查看注释以了解先前解决方案的问题。
@gansdeep答案是完美的,即
$('ul#posts').append($(wall_post).hide().fadeIn('slow'));
一个已经可见的元素不会淡入。你必须先隐藏它
wall_post.hide();
$('ul#posts').append(wall_post).fadeIn('slow');
尝试:
$('ul#posts').append(wall_post.hide().fadeIn('slow'));
相关文章:
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 淡入不带HTML的背景图像
- 通过在HTML中淡入淡出在图片中移动
- 淡入 在页面 html 之间淡出并使用数组脚本更改图像
- 动画 HTML 背景图像淡入淡出
- 如何在 jquery 动画完成后淡入 html
- Jquery - 如何在 html 元素之间来回转换(淡入/淡出)并保持位置
- html 按钮用于淡入和淡出
- 加载页面并淡入或淡出ajax html
- 淡出,替换HTML和淡入
- 附加HTML,但有单独的淡入在文档点击
- 使用fadeIn()添加html以淡入
- HTML淡入链接中的音乐
- 在 JavaScript 中的 HTML 文本中淡入淡出
- 使用功能淡入整个 HTML 页面
- 使用Javascript(或jQuery)淡入/淡出HTML元素的背景颜色
- 如何使用insertAfter方法插入html以及fadeIn效果,以便html只是淡入