HOW TO ANIMATE DIV DOWN TO UP IN JQUERY?

Linda Perla

Total Post:13

Points:93
Posted by  Linda Perla
 1352  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 Nov-12-2017 11:20:25 PM

Answer

NEWSLETTER

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