Your chaining is the issue: Try:
$("#answers div:first").clone().css({
opacity: 0
}).insertBefore("#answers div:last").slideDown('fast', function () {
$(this).animate({
opacity: 1
});
});
});
When you do $("#answers div:last").before(clone)
it returns your div i.e the add button not the cloned element and i think you are giving a delay so that slide down happens completely before you animate opacity, you can achieve that using the complete callback syntax of slideDown.
Update based on your comment:
$("#add").on("click", function (event) {
event.preventDefault();
$("#answers div:first").clone().css({
opacity: 0,
display:'none'
}).insertBefore("#answers div:last").slideDown('slow').animate({
opacity: 1
});
});