CODEWITHSUNDEEP
jquery
Jack Torris
Jack Torris

Reputation: 804

JQuery: Append Div and html slowly with effect

i am fetching data using 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.

   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.

here dd is the content getting from another page using ajax;

check this fiddle : http://jsfiddle.net/adHvb/2/

Upvotes: 6

Views: 38956

Answers (4)

Mark S
Mark S

Reputation: 3799

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?

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?

I think you should do the appending and animation on jQuery.ajax() success function.

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

});

Upvotes: 7

Furquan Khan
Furquan Khan

Reputation: 1594

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

Upvotes: 1

AAA
AAA

Reputation: 142

use Animate jquery for good effect

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

});

Upvotes: 3

Aditya Singh
Aditya Singh

Reputation: 9612

Try this out:- 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);
  });

Upvotes: 9

Related Questions