CODEWITHSUNDEEP
jquerycssjquery-animatejsfiddle
StealthRT
StealthRT

Reputation: 10552

CSS jquery moving a div from bottom to top using pixels

Hey all i have a JSFiddle that i have been working on with trying to get it to animate going from bottom to top instead of what its currently doing, top to bottom.

This will be used as a animated bar graph for a fund raiser amount that's in front of an image and this bar graph will represent the amount in dollars they have raised so far.

The jsfiddle is here: http://jsfiddle.net/kboucher/YDruG/

Any help would be great!!!

update

The HTML code:

<a href="#" id="button">View 100 (out of 500)</a>

<div id="barGraph-container">
    <div id='barGraph'></div>
</div>​

The JS:

$('#button').click(function(){
    $('#barGraph').animate({height:'72px'}, 500);
});

​ The CSS:

#barGraph-container {
    height: 200px;
    position: relative;
}
#barGraph {
    height: 200px;
    width: 50px;
    background-color: #000;
    position: absolute;
    bottom: 0;
}​

Upvotes: 0

Views: 2767

Answers (3)

lerxstrulz
lerxstrulz

Reputation: 153

Here is an example that uses 2 divs to "reveal" the graph which looks like it is growing.

http://jsfiddle.net/GZeu3/23/

Upvotes: 0

Nw167
Nw167

Reputation: 169

By giving the graph bar a relative position, and adding a top position animation to compensate for the reduced height, you can achieve this quite easily.

http://jsfiddle.net/GZeu3/19/

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

Try putting a container around your bar graph and use absolute positioning to anchor it to the bottom of the container.

Like this: http://jsfiddle.net/kboucher/YDruG/

Upvotes: 1

Related Questions