CODEWITHSUNDEEP
jqueryhtmlcss
user63762453
user63762453

Reputation: 1734

Sliding up from bottom using animate()

I am trying to make one <div> slide from bottom on another fixed <div> using the animate() method, but its not working,maybe I am doing it wrong.Here's the code:

HTML code:

<body>
<div id="back">This is fixed.</div>
 <div id="up">
  <p>This should slide.</p>
 </div>
</body>

CSS part:

        #back
    {
        background:#CCCCCC;   
        width:200px;
        height:110px; 
    }

    p
    {
        text-decoration:none;
    }
    p:hover
    {
        text-decoration:underline;
    }
    #up
    {
        background:#000000;
        opacity:0.8;
        width:200px;
        height:5px;
        position:absolute;
        color:#dedede;
    }

and finally the JS:

              $(document).ready(function(){


        $('#back').hover(function(){ 
            $('#up').animate({    
                height:'50px';
            },1000); 
        });
       });

Here's the fiddle.

Looked at a lot of other questions on SO as well but none of them worked for me.

UPDATE:Forgot to mention a minor thing that the sliding <div> should remain there for a while, so that I can click on the link.

Upvotes: 0

Views: 78

Answers (4)

Amin Jafari
Amin Jafari

Reputation: 7207

UPDATED:

you mean like this? => http://jsfiddle.net/tjp5m/11/

    $('#back, #up').hover(function(){ 
            $('#up').stop().animate({    
                height:'50px',
                marginTop:'-50px'
            },1000); 
        },function(){
            $('#up').stop().animate({    
                height:'5px',
                marginTop:'0px'
            },1000); 
        });

UPDATE 2:

if I were you I would do this, this way => http://jsfiddle.net/tjp5m/12/

much more efficient

Upvotes: 2

SW4
SW4

Reputation: 71230

You can do this using only CSS, you want to animate the max-height property of up when back is hovered over. The benefit of doing it in CSS is it also maintains a clear separation of concerns (HTML for content, JS for functionality and CSS for presentation).

Demo Fiddle

(demo of sliding the other way)

    #back {
        background:#CCCCCC;
        width:200px;
        height:110px;
    }
    p {
        text-decoration:none;
    }
    p:hover {
        text-decoration:underline;
    }
    #up {
        background:#000000;
        opacity:0.8;
        width:200px;
        max-height:5px; /* set height when slid up */
        position:absolute;
        color:#dedede;
        overflow:hidden; /* hide content when minimized */
        transition:max-height 1s ease-in; /* <--- set transition(animation) properties */
    }
    #back:hover + #up {
        max-height:50px;/* set height when slid down*/
    }

Upvotes: 2

CunningFatalist
CunningFatalist

Reputation: 473

As far as I can see, 50px should be a string:

$('#up').animate({    
     height:'50px'
},1000);

Edit: Fiddle: http://jsfiddle.net/tjp5m/7/

Update (see comments): 

  $(document).ready(function(){

    $('#back').hover(function(){ 
        $('#up').animate(function(){ // remove the function(), you're passing an object!
            height:50px; // it has to be '50px' and you have to remove ;
        },1000); 
    });

   });

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You're using wrong syntax for .animate()

$(document).ready(function () {
     $('#back').hover(function () {
         $('#up').animate({
             height: "50px"
         }, 1000);
     });
 });

Demo

Upvotes: 2

Related Questions