JQuery：慢慢附加Div和html效果

Question

我使用ajax获取数据。

  <ul class="products">

  <li>Row1</li>

  <li>Row1</li>

  <li>Row1</li>

  <li>Row1</li>

  </ul>

当用户点击li时，li会追加。

   jQuery(function(){

  jQuery('li').click(function(){

  jQuery('.products').append('<li class="new-rows"></li>');

  jQuery('.new-rows').html(dd , 500);

  });

 });

现在我正在寻找的是新生成的li慢慢显示。

这里dd是使用ajax从另一个页面获取的内容;

检查这个小提琴：http://jsfiddle.net/adHvb/2/

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/adHvb/6/

<强> 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);
  });

Answer 2

这里关于动画和效果的所有答案都非常好，但我主要关注的是提取部分，因为你没有包含它。 您是在开始时获取数据（文档就绪）还是仅在点击<li>时获取数据？

如果您在<li> click()事件被触发时获取数据，则无法为动画设置特定延迟。如果需要一些时间来获取数据怎么办？

我认为您应该在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);     
        }
    });

});

Answer 3

使用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.
   });

}）;

Answer 4

jQuery('li').click(function(){
dd = 'baba';
$('<li style="display:none;" class="new-rows"></li>').appendTo('.products').fadeIn('slow');
jQuery('.new-rows').html(dd , 500);});