Javascript JQuery动画更改元素的位置

我有一个窗口，它变宽了，在我点击按钮后又添加了一个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')


        }
    }); 

---

一个小提琴或工作片段会很好。试着把你的问题改写成一个问题。如果你提供了一个JSFIDLE链接，它会更容易帮助你；）谢谢，我现在就去。。

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;
}