CODEWITHSUNDEEP
jqueryhtmlcss
iJup
iJup

Reputation: 281

Positioning image after animation

I have one image (#een) to click on. When clicking on this this image it will .animate and will be reduced in size and another image (#eeneen) (and text) will appear. Unfortunately, #eeneen will not get to the upper top (original height of #een) , it sticks around somewhere.

How to get #eeneen to the same (original) height of #een? There is no padding active or something else..

HTML:

<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="http://s.petrolicious.com/2015/vintage-friday/08-aug/paris/paris-6.jpg" class="img-responsive center-block" style="display:none">

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

CSS:

.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: 200px;
    width: auto;
    vertical-align: middle;
}

.jumbo .col .een .texteen h1{
    font-size: 14px;
}

jQuery: 

var operator = '+=';
var operator1 = '+=';
$(document).ready(function() {
    $(".een").click(function() {
    $("#een").animate({left:operator + '-100',
                        top:operator + '+100',
                        width:operator1 + '-85',
                        height:operator1 + '-85',
                        });
        if(operator == '+='){operator = '-=';}
        else{operator = '+=';}
        if(operator1 == '+='){operator1 = '-=';}
        else{operator1 = '+=';}
    $("#eeneen").fadeToggle(300);
    $(".texteen").fadeToggle(600);
    });
});

Upvotes: 0

Views: 43

Answers (1)

timo
timo

Reputation: 2169

You should remove the vertical-align: middle; on #eeneen and give it the same padding and margin as you give #een.

CSS:

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

.jumbo .col .een #eeneen {
    height: 200px;
    width: auto;
    padding-top: 50px;
    margin-top: 60px;
}

Fiddle

UPDATE:

If you want the image to go to the top of the page, you should remove the padding and margin on the second image.

CSS

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

.jumbo .col .een #eeneen {
    height: 200px;
    width: auto;
}

Codepen

Updated codepen

Upvotes: 1

Related Questions