I am trying to fix an animation where it is a scrolling set of divs. After some time, The next div takes the top position at -55px. The code is as follows:

1. 
   
2. var landingAlertFeed = 0,
3.     container = $('.landing-alerts__feed'),
4.     items = container.find('li'),
5.     containerHeight = 0,
6.     numberVisible = 3,
7.     intervalSec = 3000;
8. 
   
9. if(!container.find('li:first').hasClass("first")){
10.    container.find('li:first').addClass("first");
11. }
12. 
    
13. items.each(function(){
14.    if(landingAlertFeed < numberVisible){
15.     containerHeight = containerHeight + $(this).outerHeight();
16.     landingAlertFeed++;
17.    }
18. });
19. 
    
20. container.css({ height: containerHeight, overflow: "hidden" });
21.   
22. function vertCycle() {
23.    var firstItem = container.find('li.first').html();
24.     
25.   container.append('<li>'+firstItem+'</li>');
26.   firstItem = '';
27.   container.find('li.first').animate({ marginTop: "-55px" }, 600, "linear", function(){  $(this).remove(); container.find('li:first').addClass("first"); });
28. }
29. 
    
30. if(intervalSec < 700){
31.   intervalSec = 700;
32. }
33. 
    
34. var init = setInterval("vertCycle()",intervalSec);
35. 
    
36. container.hover(function(){
37.   clearInterval(init);
38. }, function(){
39.   init = setInterval("vertCycle()",intervalSec);
40. });

The current easing is at linear but I see no change when I set it to "swing". Am I missing something? Thank you for any help you might be able to provide.