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:




    
    JFP
    
        
    
    
    
    




    

        
            
                
                    
                    

                    
                        Lorem ipsum
                    
                
            

            
                
                    π
                    
                        Lorem ipsum
                    
                
            

        


        
            
                
                    
                    
                        Lorem ipsum.
                    

                
            

            
                
                    
                    

                    
                        Lorem ipsum.
                    
                
            

        

    




    

        
            ..
            Learn more
        

        
            
            Lorem
            
            Learn more
        

        
            
            Ipsum
            
            Learn more
        
    



    
        ©

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

Wa Kai · Accepted Answer

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).

Animated image will not get back to his original size

Answers (1)

Related Questions