Question

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

这个https://docs.python.org/3/extending/newtypes.html显示效果以及滑动时div的外观。

CODE：

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

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

1 个答案: