Animated image will not get back to his original size

Question

Question

Clicking the upper-left (#een) or the middle-right (#vier) image will make this elements animate: they will be reduced in size and they are moving to under and to the left. Clicking again, they will move back to their original position, their size will increase. But when this animation is finished, the size of these images are just some smaller then the original ones (before the clicking), about 20px. How is this possible?*

Kind regards!

*: the best way to see this difference in size is to move your cursor on the upper part of een (the upper-left image) and clicking twice on it

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);
   });
});

Welcome to Stack Overflow! It is preferred if you can post separate questions instead of combining your questions into one. That way, it helps the people answering your question and also others hunting for at least one of your questions. Thanks! — Paulie_D, Sep 11 '15 at 08:28
Before clicking, the "pen" image has a size of `x:115, y:70`. After clicking twice, it still has that size. — Jordumus, Sep 11 '15 at 08:37
Where do you found this information? Because in `.jumbo .col .een #een` the `height` of the "pen" image is set to `170px`. — iJup, Sep 11 '15 at 08:41

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

Your calculation for #een and #vier would cause with the first animation a negative value for padding-top, that is not allowed, see this: Why does CSS not support negative padding?

Setting it back to 50px or calculating with a value lesser than the initial value of padding-top should work just fine!

Edit: One way to solve this (if this is valid with your design), would be to save the initial value for padding-top and set it on the first click to 0, if the initial value is smaller than your calculating value (e.g. here initial 50px, calc-value 62px). And on the second click set it back to the stored value.

Another way would be setting the values in css and js for padding-top exact the same (and again if this is valid with your design).

edited May 23 '17 at 12:06

Community

1
1

answered Sep 11 '15 at 08:53

Wa Kai

466
5
12

Okay! So I have to edit `paddingTop:operator11 + '-62'`? – iJup Sep 11 '15 at 09:01
These are the positions in your js-code, that need a tweak: `paddingTop:operator1 + '-62',` and `paddingTop:operator5 + '-62',` – Wa Kai Sep 11 '15 at 09:06
Yes, sorry `operator11` is a new operator. But I still didn't get it, you suggest to make a new variable to store my padding-specification into, like "padding-old" and "padding-new" and switching between these when clicking on it? – iJup Sep 11 '15 at 09:11
The first suggestion was meant as a protection to prohibit a negative value for padding-top. – Wa Kai Sep 11 '15 at 09:15

Animated image will not get back to his original size

1 Answers1