jQuery slideDown() not actually animating

jQuery slideDown() not actually animating

I'm trying to use slideDown() when displaying dynamically created elements.  I find that the delay works, but there is no animation, the div just pops up.  I've set the width, I've read you need to have a fixed width in order for jQuery to run the animation smoothly, but that still has not helped.  I had no issues when using slideUp() when removing the element, only on creation with slideDown().  Any help would be great.

  2. $(document).ready(function(){
  3.     
  4.     //Stop the form from submitting
  5.     $('#submit-form').submit(function(e){
  6.         e.preventDefault();
  7.     });
  8.     
  9.     
  10.     
  11.     //Variables to store totals
  12.     var itemCounter = 0;
  13.     var priceCounter = 0;
  14.     
  15.     //Handler to get value of ITEM and PRICE
  16.     $('#submit-btn').click(function(){
  17.          
  18.     //Create List title
  19.     if(itemCounter = 1){
  20.         $('#listTitle').html(
  21.             '<h3 id="listTitle">Your List!</h3>')}
  22.         
  23.         //Get value for submitted item and append to list
  24.         var addItem = $('#item').val();
  25.         itemCounter ++;
  26.         
  27.         //Functionality to keep track of TOTAL PRICE and be able to remove an 
  28.         //item so the price reflects the removal
  29.         var addPrice = Number.parseInt($('#cost').val());
  30.         priceCounter += addPrice;
  31.         
  32.         
  33.      
  34.         
  35.         
  36.         //Append ITEM and PRICE to document
  37.         var addToList = 
  38.             '<li class="addedItem">' +addItem+ '<button class="delete" data-price="' 
  39.             +addPrice+ '">Delete</button></li>';


  42.         //---------HEREIN LIES THE PROBLEM-------------!!!!!!!!!!!!!!!!!!
  43.         $('#items').slideDown('2000', function(){
  44.             $('#items').append(addToList);
  45.         })
  46.         
  47.         //Clear the form after submit
  48.         $('#item').val('');
  49.         $('#cost').val('');
  50.         
  51.         //Clear ESTIMATED COST TOTAL and append new total
  52.         $('#estimatedCost').html('');
  53.         $('#estimatedCost').append('$' +priceCounter); 
  54.             
  55.        
  56.     });
  57.     
  58.     //Functionality for Delete Button
  59.     $(document).on('click', '.delete', function(){     //Because the delete button has been created                                                                         //dynamically you must specify  
  60.         var price = +$(this).data('price');             //to listen to the DOCUMENT for the click on                                                                           //'DELETE'
  61.         var fade = $(this).closest('li');
  62.         fade.slideUp('slow', function(){   
  63.             fade.remove();
  64.         });
  65.         
  66.         
  67.         //Edit item total and estimated cost after removing an item
  68.         itemCounter --;
  69.         $('#itemsTotal').html('');
  70.         $('#itemsTotal').append(itemCounter);
  71.         
  72.         priceCounter -= price;
  73.         $('#estimatedCost').html('');
  74.         $('#estimatedCost').append(priceCounter);
  75.         
  76.         
  77.         
  78.         
  79.         
  80.                 
  81.       });
  82.     
  83.     //Function to create sum all off prices
  84.     function sumPrice(){}
  85.     
  86. });