CODEWITHSUNDEEP
jqueryhtmlcss
no0bCoder
no0bCoder

Reputation: 95

Animating to top

js-

$(".inner").hover(function () {
    $(this).stop(true, false).animate({
        height: "400px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
});

css-

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    margin-bottom:0px;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
}

What I want to do is that the smaller box align to bottom inside the large box, and the animation take place in upper direction, but bottom, and margin-bottom are not of any help. here is the link-

http://jsfiddle.net/4nYW6/

Upvotes: 0

Views: 63

Answers (2)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

Position your element:

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    position: absolute;
    bottom: 0;
    left: 0;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position: relative;
}

BONUS

You can do this with pure CSS:

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height 0.5s;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position: relative;
}

.inner:hover .inner {
    height: 400px;
}
  • The magic is :hover pseudo class and transition property.
  • Check the jsFiddle Demo.

Upvotes: 1

Roy Sonasish
Roy Sonasish

Reputation: 4599

Try this

.inner {
    height:100px;
    width:400px;
    background-color:#333;
    margin-bottom:0px;
    bottom:0;
    position:absolute;
}

.outer {
    height:400px;
    width:400px;
    background-color:#999;
    position:relative;
}

jsFiddle File

Upvotes: 2

Related Questions