动画形象会不会回到自己原来的大小

问题

点击左上角（#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); 
    }); 
});

来源

2015-09-11 iJup

欢迎堆栈溢出！如果您可以发布单独的问题，而不是将问题合并为一个问题，那么这是首选。这样，它可以帮助人们回答你的问题，也可以帮助其他人至少狩猎你的一个问题。谢谢！ –

我必须将它们分开吗？ – iJup

这会更好，是的。 – Jordumus

您的#een和#vier会导致与第一动画填充顶负值计算，这是不允许的，看到这一点： Why does CSS not support negative padding?

设置回50像素或比填充顶部的初始值较小的值来计算应该只是罚款！

编辑：解决这个（如果这是你的设计有效），将保存填充顶部的初始值，并把它放在第一次点击为0，如果初始值是 的一种方式小于你的计算值（例如，这里的初始值为50px，计算值为62px）。然后在第二次点击时将其设置回存储值。

另一种方式会为填充顶确切相同的（如果这同样是有效的与您的设计）被设置在CSS的价值观和JS。

来源

2015-09-11 08:53:13

好吧！所以我必须编辑'paddingTop：operator11 +'-62''？ – iJup

这些都是在你的js代码的位置，需要一个调整：'paddingTop：算子1 + '-62'，'和'paddingTop：operator5 + '-62'，' –

是的，对不起'operator11'是一个新的运营商。但我仍然没有得到它，你建议做一个新的变量来存储我的填充规范，像“padding-old”和“padding-new”，并点击它们之间的切换？ – iJup

动画形象会不会回到自己原来的大小

回答

相关问题