javascript - 动画期间布局中断

Question

我正在做一个动画，所以当用户单击一个 div 时，它会替换为第一个 div，然后以一定宽度扩展，但它会破坏布局。如果我删除带有 class .title 的 div，一切正常，但当 div .title 存在时就不行了。

这是我的 fiddle :http://fiddle.jshell.net/p2fo4ek0/

<div class="internet_wrap">
    <div class="internet tel" id="off_wrap">
        <div class="package" id="one">
            <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>

        <div class="package" id="two">
          <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>

        <div class="package" id="three">
           <div class="inner_package">
                <div class="title">title</div>
            </div>
        </div>
    </div>
</div>

    .internet {
        text-align:center;
        background: none repeat scroll 0% 0% rgba(248, 0, 140, 0.5);
        padding-bottom:10px;
        position: relative;
    }

    .internet .package {
        display: inline-block;
        /*border: 1px solid #FFFC00;*/
        height: 60px;
        width: 60px;
        border-radius: 30px;
        margin: 20px;
        background:#fff;
        color: rgba(0, 178, 248, 1);
        position: relative;
        cursor: pointer;
    }

    .inner_package {
        display: inline-block;
        width: 60px;
        transition: all 2s ease-in;
        background: #fff;
        border-radius: 30px;
        height: 60px;
    }

var animating = false;

$('#off_wrap').on('click', '.package', function () {
    if(!animating) {

        var clickedDiv = $(this).closest('.package'),
            prevDiv = $("#off_wrap > :first-child"),
            distance = clickedDiv.offset().left - prevDiv.offset().left;

        if (!clickedDiv.is(":first-child")) {
            animating = true;
            $.when(clickedDiv.animate({
               left: -distance
            }, 2000),
            prevDiv.animate({
                left: distance
            }, 2000)).done(function () {
                prevDiv.css('left', '0px');
                clickedDiv.css('left', '0px');
                //clickedDiv.css('width', $(window).width() - (clickedDiv.offset().left * 2));
                clickedDiv.css('z-index', '100');
                clickedDiv.css('overflow', 'visible');
                clickedDiv.find(".inner_package").animate({width: 260}, 2000);

                prevDiv.insertBefore(clickedDiv);
                clickedDiv.prependTo("#off_wrap");
                animating = false;
            });
        } else {
            clickedDiv.css('z-index', '100');
                clickedDiv.find(".inner_package").css('width', '260px');
        }
    }
});

Answer 1

尝试将此添加到“.internet .package”:

vertical-align: middle;