HOW TO ANIMATE DIV DOWN TO UP IN JQUERY?

Linda Perla

Total Post:13

Points:93
Posted by  Linda Perla
 1135  View(s)
Ratings:
Rate this:

Hi I’m making menu in footer

This is my code

CSS:

<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:

<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>

  1. Andrew Watson

    Post:39

    Points:273
    Re: How to animate div down to up in jquery?

    Try this code:

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

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

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

            }, function () {

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

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

            });

  1. Jessica James

    Post:16

    Points:114
    Re: How to animate div down to up in jquery?


    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>

      Modified On Mar-18-2016 11:18:36 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!