Edit in JSFiddle

$(function() {
            
            $(document).ready( function() 
            {
                $('#citybox').hide();
                $('#statebox').hide();
                
            });

            $("#zip").keyup(function() {
                var zip_in = $(this);
                var zip_box = $('#zipbox');
                
                if (zip_in.val().length<8)
                {
                    zip_box.removeClass('error success');
                }
                else if ( zip_in.val().length>8)
                {
                    zip_box.addClass('error').removeClass('success');
                }
                else if ((zip_in.val().length == 8) ) 
                {
                    
                    $.ajax({
                        url: "http://api.zippopotam.us/JP/" + zip_in.val(),
                        cache: false,
                        dataType: "json",
                        type: "GET",
                        data: "ja/" + zip_in.val(),
                      success: function(result, success) {
                            $('#citybox').slideDown();
                            $('#statebox').slideDown();
                        
                            places = result['places'][0];
                            $("#city").val(places['place name']);
                            $("#state").val(places['state']);
                            zip_box.addClass('success').removeClass('error');
                        },
                        error: function(result, success) {
                            zip_box.removeClass('success').addClass('error');
                        }
                    });
                }
    });

        });

<form action="#" method="post" class="form fancy-form">

            <fieldset>
                <legend>住所を入力してください</legend>
                <br/>
                <div>
                    <div id="zipbox" class="control-group">
                        <label for="zip">住所</label>
                        <input type="text" class='' name="zip" id="zip" placeholder="例）100-0001"/>
                    </div>    
                </div>
                <div>
                    <div id="citybox" class="control-group" >
                        <label for="city">市区</label>
                        <input type="text" name="city" id="city" placeholder="" />
                    </div>
                    <div id="statebox" class="control-group">
                        <label for="state">都道府県</label>
                        <input type="text" name="state" id="state" placeholder="" />
                    </div>
                </div>

            </fieldset>
        </form>