---
title: "How to animate div down to up in jquery?"  
description: "How to animate div down to up in jquery?"  
author: "Anonymous User"  
published: 2015-03-11  
updated: 2015-03-12  
canonical: https://www.mindstick.com/forum/23015/how-to-animate-div-down-to-up-in-jquery  
category: "javascript"  
tags: ["jquery", "jquery selectors"]  
reading_time: 3 minutes  

---

# How to animate div down to up in jquery?

Hi I’m making menu in footer

This is my [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii)

## [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem):

```
<style>    footer {        width: 100%;        position: fixed;        bottom: 0px;    }         footer ul li {            float: left;            list-style: none;            background: none repeat scroll 0 0 #cfcfcf;            width: 16.66%;            text-align: center;            padding: 8px 0;            border: 1px solid #bbb;        }             footer ul li:hover {                background: none repeat scroll 0 0 #f90;            }     #first,#second,#third,#fourth,#fifth,#six {        position: absolute;        background: none repeat scroll 0 0 #cfcfcf;        width: 100%;        min-height: 320px;        left: 0;        bottom: -300px;        display:none;    }</style>
```

**[HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript):**

```
<div id="first">    <h2>News</h2></div><div id="second">    <h2>Media</h2></div><div id="third">    <h2>Watch</h2></div><div id="fourth">    <h2>Connect</h2></div><div id="fifth">    <h2>Newsletter</h2></div><div id="six">    <h2>Subscribe</h2></div><footer>    <ul class="list-unstyled list-inline">        <li id="news">News Update</li>        <li id="media">Media Coverage</li>        <li id="watch">Watch Live</li>        <li id="connect">Connect With me</li>        <li id="gallery">Newsletter Gallery</li>        <li id="subscribe">Subscribe to Newsletter</li>    </ul></footer>
```

## JQuery:

```
<script>    $(document).ready(function () {        $("#news").hover(function () {            $("#first").css('bottom', '0' );            $("#first").css("display","block");        }, function () {            $("#first"). css('bottom', '-300px' );            $("#first").css("display", "none");        });        $("#media").hover(function () {            $("#second"). css('bottom', '0' );            $("#second").css("display", "block");        }, function () {            $("#second"). css('bottom', '-300px' );            $("#second").css("display", "none");        });        $("#watch").hover(function () {            $("#third"). css('bottom', '0' );            $("#third").css("display", "block");        }, function () {            $("#third"). css('bottom', '-300px' );            $("#third").css("display", "none");        });        $("#connect").hover(function () {            $("#fourth"). css('bottom', '0' );            $("#fourth").css("display", "block");        }, function () {            $("#fourth"). css('bottom', '-300px' );            $("#fourth").css("display", "none");        });        $("#gallery").hover(function () {            $("#fifth"). css('bottom', '0' );            $("#fifth").css("display", "block");        }, function () {            $("#fifth"). css('bottom', '-300px' );            $("#fifth").css("display", "none");        });        $("#subscribe").hover(function () {            $("#six"). css('bottom', '0' );            $("#six").css("display", "block");        }, function () {            $("#six"). css('bottom', '-300px' );            $("#six").css("display", "none");        });    });</script>
```

## Replies

### Reply by Anonymous User

This is perfect Code for animation div\

##### CSS:

\

```
<style>    body,ul {margin:0;          padding:0;    }    .ft {        position:fixed;        bottom:0;        width:100%;    }    .ft ul li{        padding:8px 0;        width:49%;        border:1px solid #bbb;        background-color:#ddd;        display:inline-block;    }    .mind,.soft {        display:none;        width:100%;        height:280px;        background-color:#ddd;        position:absolute;        left: 0;        bottom: -300px;    }</style>
```

##### JQuery:

```
$(document).ready(function () {     $("#first").hover(function () {        $(".mind").show();        $(".mind").animate({            bottom: "+0px"        }, 500);        $(".soft").stop().animate({            bottom: "-300px"        }, 500);    });     $(".mind").hover(function () {        $(".mind").show();        }, function () {            $(".mind").hide();    });     $("#second").hover(function () {        $(".soft").show();        $(".soft").animate({            bottom: "+0px"        }, 500);        $(".mind").stop().animate({            bottom: "-300px"        }, 500);    });     $(".soft").hover(function () {        $(".soft").show();    }, function () {        $(".soft").hide();    }); });
```

##### HTML:

```
<div class="mind">    <center>        <h1>Welcome !! Mindstick</h1>        <p>mindstick software pvt company</p>    </center></div><div class="soft">    <center>        <h1>Hello !! Software</h1>        <p>mindstick software pvt company</p>    </center></div> <div class="ft">    <ul>        <li id="first">MindStick</li>        <li id="second">Software
pvt ltd</li>    </ul></div>
```

### Reply by Anonymous User

Try this code:

$("#news").hover(function () {

$("#first").animate({ bottom: '0' });

$("#first").css("display","block");

}, function () {

$("#first").animate({ bottom: '-300px' });

$("#first").css("display", "none");

});


---

Original Source: https://www.mindstick.com/forum/23015/how-to-animate-div-down-to-up-in-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.