JQuery：缓慢附加 Div 和 html 效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20279532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery: Append Div and html slowly with effect
提问by Hyman Torris
i am fetching data using ajax.
我正在使用 ajax 获取数据。
<ul class="products">
<li>Row1</li>
<li>Row1</li>
<li>Row1</li>
<li>Row1</li>
</ul>
when user click on li the li will append.
当用户单击 li 时，li 将附加。
jQuery(function(){
jQuery('li').click(function(){
jQuery('.products').append('<li class="new-rows"></li>');
jQuery('.new-rows').html(dd , 500);
});
});
now what i am looking for is new generated li display slowly.
现在我正在寻找的是新生成的 li 显示缓慢。
here dd is the content getting from another page using ajax;
这里dd是使用ajax从另一个页面获取的内容；
check this fiddle : http://jsfiddle.net/adHvb/2/
检查这个小提琴：http: //jsfiddle.net/adHvb/2/
回答by Aditya Singh
Try this out:- http://jsfiddle.net/adiioo7/adHvb/6/
试试这个：- http://jsfiddle.net/adiioo7/adHvb/6/
JS:-
JS：-
jQuery('li').click(function () {
dd = 'baba';
var liData = '<li class="new-rows" style="display:none;"></li>';
$(liData).appendTo('.products').fadeIn('slow');
jQuery('.new-rows').html(dd, 500);
});
回答by Mark S
All the answers here regarding animation and effects are really good but I am mostly concern about the fetching part since you didn't include that. Do you fetch the data on the start(document ready) or only when <li>is clicked?
这里所有关于动画和效果的答案都非常好，但我最关心的是获取部分，因为你没有包括它。您是在开始时（文档准备好）还是仅在<li>单击时获取数据？
If you fetch the data when the <li>click()event is fired you cannot just set a specific delay for the animation. What if it took some time to fetch the data?
如果在<li>click()触发事件时获取数据，则不能只为动画设置特定延迟。如果获取数据需要一些时间怎么办？
I think you should do the appending and animation on jQuery.ajax()successfunction.
我认为您应该对函数进行附加和动画处理。jQuery.ajax()success
jQuery('li').click(function(){
var $newRow = jQuery('<li class="new-rows"></li>');
jQuery.ajax({
type: 'type',
url: 'url',
data: data,
success: function(dd){
$newRow.html(dd).appendTo('.products').hide().fadeIn(1000);
}
});
});
回答by AAA
use Animate jquery for good effect
使用 Animate jquery 效果好
jQuery('li').click(function(){
jQuery('.products').append('<li class="new-rows"></li>');
$( ".new-rows" ).animate({
opacity: 0.25 //use more parameter for effect
}, 5000, function() {
jQuery('.new-rows').html(dd);
// Animation complete.
});
});
});
回答by Furquan Khan
jQuery('li').click(function(){
dd = 'baba';
$('<li style="display:none;" class="new-rows"></li>').appendTo('.products').fadeIn('slow');
jQuery('.new-rows').html(dd , 500);});
