jquery - 动画后定位图像

Question

我有一张图片 (#een) 可以点击。单击此图片时，它会.animate 并且尺寸会缩小，并且会出现另一张图片 (#eeneen)(和文本)。不幸的是，#eeneen 不会到达顶部(#een 的原始高度)，它会停留在某处。

如何让 #eeneen 达到与 #een 相同的(原始)高度？没有 padding 事件或其他东西..

HTML:

<div class="jumbo">
    <div class="container">

        <div class="col">
            <div class="col-md-6 text-center">
                <div class="een">
                    <img id="een" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
                    <img id="eeneen" src="http://s.petrolicious.com/2015/vintage-friday/08-aug/paris/paris-6.jpg" class="img-responsive center-block" style="display:none">

                    <div class="texteen" style="display:none">
                        <h1>Lorem ipsum.</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.jumbo {
}

.jumbo .col .een {
}

.jumbo .col .een img {
}

.jumbo .col .een #een {
    height: 170px;
    width: auto;
    position: relative;
    padding-top: 50px;
    margin-top: 60px;

}

.jumbo .col .een #eeneen {
    height: 200px;
    width: auto;
    vertical-align: middle;
}

.jumbo .col .een .texteen h1{
    font-size: 14px;
}

jQuery:

var operator = '+=';
var operator1 = '+=';
$(document).ready(function() {
    $(".een").click(function() {
    $("#een").animate({left:operator + '-100',
                        top:operator + '+100',
                        width:operator1 + '-85',
                        height:operator1 + '-85',
                        });
        if(operator == '+='){operator = '-=';}
        else{operator = '+=';}
        if(operator1 == '+='){operator1 = '-=';}
        else{operator1 = '+=';}
    $("#eeneen").fadeToggle(300);
    $(".texteen").fadeToggle(600);
    });
});

Answer 1

你应该删除 #eeneen 上的 vertical-align: middle; 并给它相同的 padding 和 margin 就像你给 #een 一样。

CSS:

.jumbo .col .een #een {
    height: 170px;
    width: auto;
    position: relative;
    padding-top: 50px;
    margin-top: 60px;    
}

.jumbo .col .een #eeneen {
    height: 200px;
    width: auto;
    padding-top: 50px;
    margin-top: 60px;
}

Fiddle

更新:

如果您希望图片位于页面顶部，您应该移除第二张图片的内边距和边距。

CSS

.jumbo .col .een #een {
    height: 170px;
    width: auto;
    position: relative;
    padding-top: 50px;
    margin-top: 60px;    
}

.jumbo .col .een #eeneen {
    height: 200px;
    width: auto;
}

Codepen

Updated codepen