forum

Home / DeveloperSection / Forums / How to animate div down to up in jquery?

Ask Question

How to animate div down to up in jquery?

Anonymous User235111-Mar-2015

Hi I’m making menu in footer

This is my code

CSS:

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

HTML:

<divid="first">
    <h2>News</h2>
</div>
<divid="second">
    <h2>Media</h2>
</div>
<divid="third">
    <h2>Watch</h2>
</div>
<divid="fourth">
    <h2>Connect</h2>
</div>
<divid="fifth">
    <h2>Newsletter</h2>
</div>
<divid="six">
    <h2>Subscribe</h2>
</div>
<footer>
    <ulclass="list-unstyled list-inline">
        <liid="news">News Update</li>
        <liid="media">Media Coverage</li>
        <liid="watch">Watch Live</li>
        <liid="connect">Connect With me</li>
        <liid="gallery">Newsletter Gallery</li>
        <liid="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>
javascriptjquery jquery selectors 
Updated on 12-Mar-2015
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Anonymous User

Anonymous User

12-Mar-2015
This is perfect Code for animation div

CSS:


<style>
    body,ul {margin:0;
          padding:0;
    }
    .ft {
        position:fixed;
        bottom:0;
        width:100%;
    }
    .ftulli{
        padding:8px0;
        width:49%;
        border:1pxsolid#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:
<divclass="mind">
    <center>
        <h1>Welcome !! Mindstick</h1>
        <p>mindstick software pvt company</p>
    </center>
</div>
<divclass="soft">
    <center>
        <h1>Hello !! Software</h1>
        <p>mindstick software pvt company</p>
    </center>
</div>
 
<divclass="ft">
    <ul>
        <liid="first">MindStick</li>
        <liid="second">Software pvt ltd</li>
    </ul>
</div>
Anonymous User

Anonymous User

11-Mar-2015

Try this code:

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

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

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

        }, function () {

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

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

        });

Liked By