After appending to list, animate jquery slider

I'm using a jquery slider to display some text. However after appending to the list, the animation does not happen on the appended the list.
Html

<div id="banner-fade" style="display: none;">

    <!-- start Basic Jquery Slider -->
    <ul class="bjqs" id="slide">
      <li>Append1</li>
      <li>Append2</li>
    </ul>
    <!-- end Basic jQuery Slider -->

  </div>
  <!-- End outer wrapper -->

  <script class="secret-source">
    jQuery(document).ready(function($) {

      $('#banner-fade').bjqs({
        height      : 320,
        width       : 620
      });

    });
  </script>

Jquery

$(function() {
  $('input#submit').bind('click', function() {
    $.getJSON('/GetAnswer', {
      question: $('input[name="question"]').val()
    }, function(data) {
     for(var i=0; i<data.result.length;i++)
      $("#banner-fade ul").append("<li>"+data.result[i].answer+"</li><ul><li>"+data.result[i].next_answer[0]+"</li><li>"+data.result[i].next_answer[1]+"</li><li>"+data.result[i].next_answer[2]+"</li></ul>")


      console.log(data.result.length)
    });
    return false;
  });
});

I get a list from /GetAnswer which I'm trying to append to the ul. I'm able to successfully append but the slider animates only the existing li. I not able to slide to the < li > that are appended later. I've been stuck on this for hours and I'm new to web dev. Thanks in advance!