javascript - jQuery Effect导致button不被div包围

Question

在使用jQuery效果时，我的div在滑动的时候塌了一点，进来的div也塌了一点。这将是一个响应式网站，所以我认为我不应该设置宽度或高度。我尝试了一个我读到的关于使用 position: absolute 的建议，但它没有产生我想要的结果。有没有办法防止 div 折叠？我希望每个 div 在滑动时和不滑动时看起来一样。

这fiddle展示滑动时的效果和 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);
    });
});

Answer 1

看起来你的动画在动画过程中添加了样式属性。如果放慢动画速度并检查元素，就可以看到这一点。它在动画期间添加静态高度和宽度。我能够通过将其添加到您的 .faaInformation css 来修复高度和宽度

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