问题
单击左上角(#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>©</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);
});
});