Javascript 带有幻灯片动画的jQuery UI可调整大小的bug

我似乎无法理解jQueryUI Resizeable函数是如何导致我创建的“chat box”div元素的锚点的。问题是，当您通过拖动右上角来调整此元素的大小时，它确实会正确调整大小，但当您按“关闭”按钮播放jQuery动画以折叠它时，它将以错误的方向折叠。如果根本不调整长方体的大小，则此折叠动画将正常工作

似乎还有另一个问题，调整大小会导致框在页面上跳得更高，但这似乎只发生在Google Chrome上，Firefox工作正常，不知道为什么

尝试调整长方体的大小，然后将其关闭以查看问题：

$（文档）.ready（函数（）{
//控制聊天室的大小调整
$（'.chat_box'）。可调整大小({
句柄：“n，e，ne”，
最小宽度：300，
身高：100，
最大宽度：700，
最大高度：500，
});
});
函数最小化（chatId）{
var bottom_bar=document.getElementById（“bottom_bar”）；
var box=底部工具栏。getElementsByClassName（“聊天盒”）[chatId]；
var bar=bottom_bar.getElementsByClassName（“chat_bar”）[chatId]；
bar.className=“聊天室\聊天室\聊天盒\最小化”；
$（框）。停止（）。设置动画({
高度：“0px”，
宽度：bar.offsetWidth，
},
“正常”，函数（）{
$（box.hide（）；
}
);
}

#底部#u条{
位置：固定；
z指数：10；
底部：0px；
左：0px；
右：0px；
最大高度：40px；
背景色：#0042b3；
填充：2×20px；
}
聊天室{
位置：固定；
宽度：350px；
高度：180像素；
利润率：0px 4px；
底部：45px；
}
分区关闭\u btn{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：30px；
身高：100%；
}
分区关闭\u btn：之前{
内容：“x”；
显示：块；
文本对齐：居中；
垂直对齐：中间对齐；
线高：25px；
字体大小：粗体；
字体系列：Arial，无衬线；
指针事件：无；
}
分区关闭按钮：悬停{
背景色：rgba（0,9,26,0.8）；
光标：指针；
}
div.chat\u box\u最大化{
背景色：白色；
宽度：350px；
利润率：5px0px；
填充：2px；
边框：3px实心#0045cc；
边界半径：5px；
显示：内联块；
}
div.chat\u box\u最大化输入{
宽度：100%；
边界：无；
}
div.chat\u box\u最大化p{
显示：无；
}
div.chat\u box\u最小化{
背景色：#0022266；
;
最大宽度：200px；
最小宽度：80px；
利润率：5px0px；
填充：2px；
边框：3px实心#0022266；
;
边界半径：5px；
显示：内联块；
}
div.chat\u box\u最小化：悬停{
背景色：#3378ff；
边框：3px实心#3378ff；
光标：指针；
}
div.chat\u box\u最小化表单{
显示：无；
}
div.chat\u box\p{
利润率：0px 5px；
字号：10pt；
颜色：白色；
字体大小：粗体；
指针事件：无；
}
.轻型集装箱，
.深色集装箱{
-网络工具包盒阴影：0px 0px 4px 2px rgba（0,0,0,0.57）；
-moz盒阴影：0px 0px 4px 2px rgba（0,0,0,0.57）；
盒影：0px 0px 4px 2px rgba（0,0,0,0.57）；
边框：1px实心#005eff；
填充：1px；
}
.轻型集装箱{
背景色：rgba（0,34,102,0.9）；
}
.深色集装箱{
背景色：rgba（0,9,26,0.9）；
}
.轻型集装箱。车身，
.深色容器。主体{
填充物：5px；
}
分区基本名称{
位置：相对位置；
宽度：100%；
背景色：#005eff；
填充：4px；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
部门基本职务p{
边际：0px；
指针事件：无；
}
div.basic\u面板div.basic\u标题{
字体大小：14px；
字体大小：粗体；
文本对齐：居中；
文本转换：大写；
}

聊天室

聊天室

从顶部手柄调整大小时，它会更改坐标和高度。由于使用bottom设置位置，通常在“动画”上，高度将发生变化，但不会改变bottom坐标。但一旦可调整大小设置了top坐标，则动画将制作，但仍保留top坐标

您可以使用resize回调来防止在调整大小时设置top坐标。然后它会在动画中保持正确的方向，并且调整大小也会起作用

$（文档）.ready（函数（）{
//控制聊天室的大小调整
$（'.chat_box'）。可调整大小({
句柄：“n，e，ne”，
最小宽度：300，
身高：100，
最大宽度：700，
最大高度：500，
调整大小：函数（事件、ui）{
css（'top'，''）；
}
});
});
函数最小化（chatId）{
var bottom_bar=document.getElementById（“bottom_bar”）；
var box=底部工具栏。getElementsByClassName（“聊天盒”）[chatId]；
var bar=bottom_bar.getElementsByClassName（“chat_bar”）[chatId]；
bar.className=“聊天室\聊天室\聊天盒\最小化”；
$（框）。停止（）。设置动画({
高度：“0px”，
宽度：bar.offsetWidth，
},
“正常”，函数（）{
$（box.hide（）；
}
);
}

#底部#u条{
位置：固定；
z指数：10；
底部：0px；
左：0px；
右：0px；
最大高度：40px；
背景色：#0042b3；
填充：2×20px；
}
聊天室{
位置：固定；
宽度：350px；
高度：180像素；
利润率：0px 4px；
底部：45px；
}
分区关闭\u btn{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：30px；
身高：100%；
}
分区关闭\u btn：之前{
内容：“x”；
显示：块；
文本对齐：居中；
垂直对齐：中间对齐；
线高：25px；
字体大小：粗体；
字体系列：Arial，无衬线；
指针事件：无；
}
分区关闭按钮：悬停{
背景色：rgba（0,9,26,0.8）；
光标：指针；
}
div.chat\u box\u最大化{
背景色：白色；
宽度：350px；
利润率：5px0px；
填充：2px；
边框：3px实心#0045cc；
边界半径：5px；
显示：内联块；
}
div.chat\u box\u最大化输入