在动态元素上添加类

Question

I have a class that when I add it it activates an animation with the use of ajax i'm creating list of topics after that i'm trying to add class for each li element with a delay so it looks like every second a new topic is added to the list, but it didn't work.

The css file include slideExpandUp class which does the animation (this work great)

Here's the js code:

$(document).ready(function(){
  GetTopics();
  AnimateEvent();
});


function GetTopics() {
  $.ajax({
    url: '/Main/GetTopics',
    dataType: "json",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    async: true,
    processData: false,
    cache: false,
    success: function (data) {
      if (data.topics != null) {
        var myTopics = "";

        $.each(data.topics, function (idx, obj) {
          myTopics += "<li class='topic'><a href='#'>" + obj.Topic + "</a></li>";
        });

        $("#topics").append(myTopics);
      }
      else {
        alert("2");
      }
    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
  })
}

function AnimateEvent() {
  setTimeout(function () {
    $("#topics li").each(function () {
      $(this).addClass('slideExpandUp') 
    });
  }, 0);
}

To sum up, I need to know how, after creating elements, I'm adding class for each element with a delay between each add.

Thank you all.

Answer 1

You could use the setInterval() method instead :

var current_index=0;

setInterval(function () {
  activeNextLi(); 
}, 1000); //1 second

function activeNextLi(){
  if(current_index<$("#topics li").length-1)
    current_index++;
  else
    current_index=0;

  $("#topics li").removeClass('slideExpandUp');
  $("#topics li").eq(current_index).addClass('slideExpandUp')
}

That will add class slideExpandUp to all the li elements every second as the passed parameter 1000 shows.

Hope this helps.

 var current_index=0; setInterval(function () { activeNextLi(); }, 1000); //1 second function activeNextLi(){ if(current_index<$("#topics li").length-1) current_index++; else current_index=0; $("#topics li").removeClass('slideExpandUp'); $("#topics li").eq(current_index).addClass('slideExpandUp') } 

 .slideExpandUp{ color:red; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id='topics'> <li class='slideExpandUp'>topic 1</li> <li>topic 2</li> <li>topic 3</li> <li>topic 4</li> </ul> 

Answer 2

try to make your event under AnimateEvent function as delegated event like this and use setInterval may be this can help you.

JAVASCRIPT CODE:

function AnimateEvent() {
  setInterval(function () {
    $('body').find("#topics li").each(function () {
      $(this).addClass('slideExpandUp') 
    });
  }, 100);
}

Answer 3

Here in your case the function AnimateEvent doesn't any effect whatsoever because function GetTopics is a asynchronous call and it will get finished after some delay in future. While you are calling the AnimateEvent before anything added in the DOM.

So, the solution is to pass the function as a callback and call it when you finish your append.

$(document).ready(function() {
  GetTopics(AnimateEvent); // <---pass the function as callback here.
});


function GetTopics(callback) {
  $.ajax({
    url: '/Main/GetTopics',
    dataType: "json",
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    async: true,
    processData: false,
    cache: false,
    success: function(data) {
      if (data.topics != null) {
        var myTopics = "";

        $.each(data.topics, function(idx, obj) {
          myTopics += "<li class='topic'><a href='#'>" + obj.Topic + "</a></li>";
        });

        $("#topics").append(myTopics);
      } else {
        alert("2");
      }
      callback(); //<----call that function here.
    },
    error: function(xhr) {
      alert(xhr.responseText);
    }
  })
}

function AnimateEvent() {
  $("#topics li").each(function() {
    $(this).addClass('slideExpandUp')
  });
}