Home > DeveloperSection > Forums > How to animate div down to up in jquery?
Linda Perla
Linda Perla

Total Post:13

Points:93
Posted on    March-11-2015 5:05 AM

 JavaScript JQuery  Jquery Selectors 
Ratings:


 2 Reply(s)
 810  View(s)
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>



Andrew Watson
Andrew Watson

Total Post:39

Points:273
Posted on    March-11-2015 5:10 AM

Try this code:

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

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

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

        }, function () {

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

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

        });


Jessica James
Jessica James

Total Post:16

Points:114
Posted on    March-12-2015 7:29 AM


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

Don't want to miss updates? Please click the below button!

Follow MindStick