动画图像不会恢复到原来的大小答案

【问题标题】：Animated image will not get back to his original size动画图像不会恢复到原来的大小
【发布时间】：2015-12-07 17:54:55
【问题描述】：

Codepen

问题

单击左上角 (#een) 或右中角 (#vier) 图像将使这些元素具有动画效果：它们将缩小尺寸并移至下方和左侧。再次点击，他们会回到原来的位置，他们的大小会增加。但是当这个动画完成后，这些图像的大小只是比原始图像（点击之前）小一些，大约 20px。这怎么可能？*

亲切的问候！

*：查看这种大小差异的最佳方法是将光标移动到een 的上部（左上图）并单击两次

HTML：

<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>
<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="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block" class="img-responsive center-block" style="display:none">

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

            <div class="col-md-6 text-center">
                <div class="twee">
                    <h1>π</h1>
                    <div class="tweetwee" style="display:none">
                        <h2>Lorem ipsum</h2>
                    </div>
                </div>
            </div>

        </div>


        <div class="col">
            <div class="col-md-6">
                <div class="drie">
                    <img id="drie" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
                    <div class="driedrie" style="display:none">
                        <h1>Lorem ipsum.</h1>
                    </div>

                </div>
            </div>

            <div class="col-md-6 text-center">
                <div class="vier">
                    <img id="vier" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block">
                    <img id="viervier" src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg" class="img-responsive center-block" class="img-responsive center-block" style="display:none">

                    <div class="textvier text center" style="display:none">
                        <h1>Lorem ipsum.</h1>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>


<div class="supporting">
    <div class="container">

        <div class="col">
            <h1>..</h1>
            <a href="#">Learn more</a>
        </div>

        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
            <h2>Lorem</h2>
            <p></p>
            <a href="#">Learn more</a>
        </div>

        <div class="col">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
            <h2>Ipsum</h2>
            <p></p>
            <a href="#">Learn more</a>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <p>&copy;</p>
    </div>
</div>

</body>

</html>

CSS：

html {}

body:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 145px;
    bottom: 0;
    left: 50%;
    border-left: 1px dotted #333333;
}

.header {
}

.header i {
    font-size: 30px;
    margin-top: 5px;
}

.header a{
    color: rgb(250,250,250);
    font-size: 30px;
    text-align: center;
}

.header .col-md-10 {
    background-color: rgb(50,50,50);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.container-fluid {
    max-width: none;
}

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: 250px;
    width: auto;
    padding-top: 20px;
}

.jumbo .col .een .texteen h1 {
    font-size: 14px;
    padding-top: 21px;
    text-align: center;
    width: 350px;
}

.jumbo .col .twee {
    height: 350px;
    margin: 25px;
}

.jumbo .col .twee h1 {
    font-size: 160px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    padding-top: 50px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.jumbo .col h2 {
    font-size: 14px;
    padding-bottom: 100px;
}

.jumbo .col .drie {}

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

.jumbo .col .drie h1 {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    vertical-align: bottom;
    padding: 15px 50px;
    border: 1px solid #333333;
    border-radius: 1500px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    margin-top: 20px;
}

.jumbo .col .vier {}

.jumbo .col .vier img {}

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

.jumbo .col .vier #viervier {
    height: 250px;
    width: auto;
    padding-top: 20px;
}

.jumbo .col .vier .textvier h1 {
    font-size: 14px;
    padding-top: 21px;
    text-align: center;
    width: 350px;
}

.supporting {
    padding-top: 80px;
    padding-bottom: 100px;
}

.supporting .col {
    float: left;
    width: 33%;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    margin-bottom: 24px;
}

.supporting img {
    height: 32px;
    margin-top: 150px;
}

.supporting .col h1 {
    font-size: 35px;
    padding-bottom: 48px;
    margin-top: 190px;
}

.supporting h2 {
    font-weight: 600;
    font-size: 23px;
    text-transform: uppercase;
    padding: 0 50px;
    margin-bottom: 60px;
}

.supporting p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.supporting a {
    font-size: 10px;
    color: #333333;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #333333;
    padding: 15px 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.clearfix {
    clear: both;
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 30px 0;
}

.footer p {
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}

JS：

var operator = '+=';
var operator1 = '+=';
$(document).ready(function() {
    $(".een").click(function() {
    $("#een").animate({left:operator + '-200',
        bottom:operator + '-330',
        width:operator1 + '-85',
        height:operator1 + '-85',
        marginTop:operator1 + '-145',
        paddingTop:operator1 + '-62',
        });
        if(operator == '+='){operator = '-=';}
        else{operator = '+=';}
        if(operator1 == '+='){operator1 = '-=';}
        else{operator1 = '+=';}
    $("#eeneen").toggle(300);
    $(".texteen").toggle(600);
    });
});

var operator2 = '+=';
$(document).ready(function(){
     $(".twee").click(function() {
     $(".twee").children('h1').animate({top:operator2 + '-60'});
          if(operator2 == '+='){operator2 = '-=';}
          else{operator2 = '+=';}
    $(".tweetwee").fadeToggle(600);
   });
});

var operator3= '+=';
$(document).ready(function(){
    $(".drie").click(function() {
    $("#drie").animate({top:operator3 + '-60'});
        if(operator3 == '+='){operator3 = '-=';}
        else{operator3 = '+=';}
     $(".driedrie").toggle(600);
    });
});


var operator4 = '+=';
var operator5 = '+=';
$(document).ready(function() {
    $(".vier").click(function() {
    $("#vier").animate({left:operator4 + '-200',
         bottom:operator4 + '-330',
         width:operator5 + '-85',
         height:operator5 + '-85',
         marginTop:operator5 + '-145',
         paddingTop:operator5 + '-62',
         });
         if(operator4 == '+='){operator4 = '-=';}
         else{operator4 = '+=';}
         if(operator5 == '+='){operator5 = '-=';}
         else{operator5 = '+=';}
    $("#viervier").toggle(300);
    $(".textvier").toggle(600);
   });
});

【问题讨论】：

欢迎来到 Stack Overflow！如果您可以发布单独的问题而不是将您的问题合并为一个问题，则最好。这样，它可以帮助人们回答您的问题，也可以帮助其他人至少寻找您的一个问题。谢谢！
我必须把它们分开吗？
这样会更好，是的。
点击前，“笔”图片的大小为x:115, y:70。单击两次后，它仍然是那个大小。
您在哪里找到此信息？因为在.jumbo .col .een #een 中，“笔”图像的height 设置为170px。

标签： jquery html css

【解决方案1】：

您对 #een 和 #vier 的计算会导致第一个动画的 padding-top 为负值，这是不允许的，请参见： Why does CSS not support negative padding?

将其设置回 50px 或使用小于 padding-top 初始值的值进行计算应该可以正常工作！

编辑： 解决此问题的一种方法（如果这对您的设计有效），如果初始值小于您的计算值（例如这里初始50 像素，计算值 62 像素）。并在第二次单击时将其设置回存储的值。

另一种方法是将 css 和 js 中的值设置为 padding-top 完全相同（如果这对您的设计有效，则再次设置）。

【讨论】：

好的！所以我必须编辑paddingTop:operator11 + '-62'？
这些是您的 js 代码中需要调整的位置：paddingTop:operator1 + '-62', 和 paddingTop:operator5 + '-62',
是的，抱歉operator11 是新运营商。但我还是没听懂，你建议创建一个新变量来存储我的填充规范，比如“padding-old”和“padding-new”，并在点击时在它们之间切换？
第一个建议是为了防止 padding-top 出现负值。