I have an image of a little tree and I would like to make it grow from bottom to top using jQuery and CSS.

For the moment the tree has bottom position to 0 and goes up with animate() jQuery function.

I can make a div that overlaps to the tree and animate it with animate() jquery function and removing the height to it, but the original background (of the body) uses a CSS gradient so I can't make the div overlap the image. Here is my code:

CSS:

.wrap_tree{
    height:300px;
    position:relative;
}
.tree{
    overflow: hidden;
    position:absolute;
    display:none;
    bottom:0px;
    width:200px;
    left:28%;
}

HTML:

<div class="wrap_tree">
    <div class="tree">
        <img src="tree.png"/>
    </div>
</div>

JavaScript/jQuery:

$('.tree').animate({
    height: 'toggle'
},5000);

I have an image of a little tree and I would like to make it grow from bottom to top using jQuery and CSS.

For the moment the tree has bottom position to 0 and goes up with animate() jQuery function.

I can make a div that overlaps to the tree and animate it with animate() jquery function and removing the height to it, but the original background (of the body) uses a CSS gradient so I can't make the div overlap the image. Here is my code:

CSS:

.wrap_tree{
    height:300px;
    position:relative;
}
.tree{
    overflow: hidden;
    position:absolute;
    display:none;
    bottom:0px;
    width:200px;
    left:28%;
}

HTML:

<div class="wrap_tree">
    <div class="tree">
        <img src="tree.png"/>
    </div>
</div>

JavaScript/jQuery:

$('.tree').animate({
    height: 'toggle'
},5000);

• javascript
• jquery
• html
• css

• please provide a jsfiddle which replicates your issue – A. Wolff Commented Feb 22, 2014 at 12:59
• @A.Wolff was pretty easy, he wanted a tree growing effect ;) – Mr. Alien Commented Feb 22, 2014 at 13:07
• 1 @Mr.Alien lol, by tree i was thinking something like a treeview, shame on me ;) – A. Wolff Commented Feb 22, 2014 at 13:10
• 1 @A.Wolff ha ha nope, he said animate from bottom to top so I got that he wanted to achieve tree growing effect ;) – Mr. Alien Commented Feb 22, 2014 at 13:12

2 Answers 2

How about doing this with Pure CSS? I made it from scratch using CSS3 @keyframe

Explanation: Am just overlapping the tree using an absolute positioned element, and than using @keyframe am collapsing the height property to 0, rest is self explanatory.

Demo

Demo 2 (Added position: relative; to the container element as this is important to do else your position: absolute; element will run out in the wild)

Demo 3 Tweaking up animation-duration for slower animation rate

.tree {
    width: 300px;
    position: relative;
}

.tree > div {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    top: 0;
    left: 0;
    -webkit-animation-name: hello;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-name: hello;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.tree img {
    max-width: 100%;
}



@keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

@-webkit-keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

HTML

<div><img src="image03.png" /></div>

CSS

div {
  position: relative;
  -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
  animation: myfirst 5s linear 2s infinite alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
  0%   {left:0px; top:0px;}
  25%  {left:0px; top:0px;}
  50%  {left:0px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
  0%   {left:0px; top:0px;}
  25%  {left:0px; top:0px;}
  50%  {left:0px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {left:0px; top:0px;}
}