Fadein newly added <li>

Fadein newly added <li>

Hi, I created a new <li> using "after". Is there some way to make my new <li> fade in instead of it just appearing all of a sudden? Below is my code and the html

<script type="text/javascript">
$(document).ready(function(){
   $('.a-1').click(function(){
      $(this).after('<li>two</li>');
   });
});
</script>
</head>

<body>
<ul>
   <li><a class="a-1" href="#">one</a></li>
    <li>three</li>
</ul>
</body>