JavaScript淡入/淡出Div

Question

I have a search input #submit , once an ISBN is submitted a div fades in below showing the results (from Google Books Api). I then have a button 'Add to Library' #add - this successfully adds the info into my db via Ajax and fades out the div, all good so far.

However when I input another ISBN and click #submit - nothing appears. The div is still hidden (or faded out). How can I make the div 'reset' to it's default setting after it has faded-out? I have to manually refresh the page each time I want to search.

I am most likely doing something very silly as I am new to JS, however any help/direction is much appreciated. I have been looking at the jQuery fadeToggle() Method - is this correct?

My Code

$(document).ready(function() {
    $('#submit').click(function(ev) {
        ev.preventDefault();

        $.getJSON(url,function(data){
            $("#add").prop('disabled', false);
            $.each(data.items, function(entryIndex, entry){
                var html = '<div class="results well">';   
                html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                html += '<hr><button id="add" name="add">add to library</button>';
                $(html).hide().appendTo(".result").fadeIn(1000);

                $('#add').click(function(ev) {
                    ev.preventDefault();

                    $.ajax({
                        type: 'POST',
                        url: 'addIsbnScript.php',
                        data: {
                            'isbn' : isbn,
                            'title' : entry.volumeInfo.title
                        },
                        success: function () { //when form has been submitted successfully do below
                            $('.result').fadeOut(1000); //fade out the results div
                        }//end success function
                    });//end ajax
                });//end add button funct 
            });//end of each function
        });//end getJSON
    });// end submit.click
});//end

Answer 1

Change

$('.result').fadeOut(1000);

to

$('.results').fadeOut(1000);

Don't use the same ID for each add button, because you are adding multiple buttons. So <button id="add" ...> isn't unique after the second press. The add button ID should match the selector of the click event handler. For example:

$(document).ready(function() {
     var addID = 1;

     $('#submit').click(function(ev) {
         ev.preventDefault();

         $.getJSON(url,function(data){
             $("#add").prop('disabled', false);
             $.each(data.items, function(entryIndex, entry){
                 var html = '';   

                 addID++;
                 html += '<div class="results well">';
                 html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';  
                 html += '<hr><button id="add'+addID+'" name="add">add to library</button>';
                 $(html).hide().appendTo(".result").fadeIn(1000);

                 $('#add'+addID).click(function(ev) {
...

Answer 2

success = function() {
    $('.result').fadeOut(1000, function() {
      $('.result').show();
    });
};

You cannot stop the animation halfway. ie. you cannot call show() till the fadeout animation completes.