Javascript jQuery效果导致按钮不被div包围

当使用jQuery效果时，我的div在滑动时会稍微折叠，进入的div也会稍微折叠。这将是一个响应网站，所以我不认为我应该把一个宽度或高度。我尝试了一个关于使用position的建议：绝对，但它并没有产生我想要的结果。有什么方法可以防止div崩溃吗？我希望每个div在滑动时看起来和不滑动时一样

这显示了效果以及滑动时div的外观

代码：

<div class="well basicInformation">
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">Basic Information</h4>
        </a>
    </div>
    <div class="row">
        <div class="col-md-5">
            <label for="firstname">First Name</label>
            <input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
        </div>
        <div class="col-md-2">
            <label for="MI">Middle Initial</label>
            <input type="text" id="MI" class="form-control" ng-model="middlename" />
        </div>
        <div class="col-md-5">
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="address">Address</label>
            <input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="address2">Address 2</label>
            <input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <label for="city">City</label>
            <input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
        </div>
        <div class="col-md-2">
            <label for="address2">Locale/State</label>
            <input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
        </div>
        <div class="col-md-2">
            <label for="address2">Region</label>
            <input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
        </div>
        <div class="col-md-3">
            <label for="address2">Country</label>
            <input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
        </div>
        <div class="col-md-2">
            <label for="address2">Postal Code</label>
            <input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="phone">Phone (Default)</label>
            <input type="radio" id="radioHome1" /><label>&nbsp;Home</label>
            <input type="radio" id="radioMobile1" /><label>&nbsp;Mobile</label>
            <input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
        </div>
        <div class="col-md-6">
            <label for="phone2">Phone 2 (Alternate)</label>
            <input type="radio" id="radioHome2" /><label>&nbsp;Home</label>
            <input type="radio" id="radioMobile2" /><label>&nbsp;Mobile</label>
            <input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="email">Email address</label>
            <input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
        </div>
        <div class="col-md-6">
            <label for="password">Password</label>
            <input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-10 col-md-2">
            <button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
        </div>
    </div>
</div>

<div class="well faaInformation" style="display: none;">
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">FAA Required Information</h4>
        </a>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label for="federalRegistrationId">Federal Registration ID</label>
            <input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
        </div>
        <div class="col-md-6">
            <label for="pilotNumber">Pilot Number</label>
            <input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-10 col-md-2">
            <button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
        </div>
    </div>
</div>


var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };

$("#submitBasicInformation").on('click', function () {
    $.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
        $(".faaInformation").effect("slide", showoptions, 1250);
    });
});

名字
中间字首
姓
地址
地址2
城市
地区/状态
区域
国家
邮政编码
电话（默认）
家
可移动的
电话2（备用）
家
可移动的
电子邮件地址
密码
下一个
联邦注册ID
飞行员号码
提交
var hideoptions={“方向”：“左”，“模式”：“隐藏”}；
var showoptions={“方向”：“右”，“模式”：“显示”}；
$（“#提交基础信息”）。在（'单击'，函数（）{
$.when（$（“.basicInformation”）.effect（“幻灯片”，隐藏选项，1250））.then（函数（数据，文本状态，jqXHR）{
美元（“.faaInformation”）。效果（“幻灯片”，showoptions，1250）；
});
});

看起来您的动画正在动画过程中添加样式属性。如果减慢动画速度并检查元素，可以看到这一点。它在动画中添加了一个静态的高度和宽度。通过将此添加到您的.faain信息css中，我可以确定高度和宽度

height: auto !important;
width: auto !important;

---

美好的谢谢你的解释。我需要记住，当我看到事情不按预期运行时，我可以检查元素。是的，学会爱上devtools！这是我第一次去的地方，当事情不正常的时候