JQuery动画改变了元素的位置

Question

我有一个窗口变得更宽，另外一个div在我点击按钮后附加。但问题是点击它后按钮消失了。我无法弄清楚为什么会发生这种情况，但我需要它才能拥有完全相同的位置。任何提示将不胜感激！

var scriptRow = $('<div class="row"/>').appendTo(tabPage);
         var scriptRowInnereDiv = $('<div class="col-xs-12"/>').appendTo(scriptRow);
         var scriptDiv = $('<div class="col-xs-10"/>').appendTo(scriptRowInnereDiv);
         var scriptPanel = sincapp.ui.createScriptPanel(value, tabPage, "text/x-rsrc");
         scriptPanel.appendTo(scriptDiv);
         var ButtonDiv= $('<div class="col-xs-2 buttonDiv"/>').appendTo(scriptRowInnereDiv);
         var button=$('<input type="button" class="button-arrow"></input>').appendTo(ButtonDiv);


           button.click(function(){
        var properties = $("#window-x");
        startAnimation();
        function startAnimation(){

            properties.animate({width: 1000}, "slow");
            scriptDiv.toggleClass("col-xs-8");
            var table =$('<div class="col-xs-2" style="height : 300px; width : 200px;"/>').appendTo(scriptRowInnereDiv);
           table.css('background-color','blue')


        }
    }); 

和css：

input.button-arrow {
    background-image: url("../img/arrow_tool.png");  
    background-color: transparent;   
    background-repeat: no-repeat;   
    background-position: 0px 0px;   
    border: none;             
    cursor: pointer;          
    height: 16px;             
    padding-left: 16px;      
    vertical-align: middle;  
    margin-left: 39px;
}

.buttonDiv {
    padding-left: 10%;
    /* height: 30px; */
    padding-top: 25%;


    width: 90px;
}