CODEWITHSUNDEEP
jqueryanimationslide
user3278918
user3278918

Reputation: 25

Slide div up from bottom to read more content

i'm trying to slide a text in from under a div. Each text has variable length. I created the following JSFiddle:

http://jsfiddle.net/Ronnos/5AnRk/1/

The problem here is that it slides down instead of up (the other menu-items move up). I want the other items to remain at the bottom of the page.

I know that what i've achieved so far can be easily done with just CSS and transitions:

.item-reader {display:none}
.menu-item:hover > .item-reader {display:block}

But i want to slide it up (this is another example: http://return-true.com/2010/03/creating-a-slide-up-footer-using-jquery/)

Thanks if someone will help me!

Upvotes: 0

Views: 324

Answers (1)

Moorthy GK
Moorthy GK

Reputation: 1301

http://jsfiddle.net/5AnRk/4/

Jquery :

$('.menu-item').hover(
    function() { 
        $(this).children('.read-more').show();
        $(this).animate({'marginTop' : '-25px'} );
    }, function(){
        $(this).animate({'marginTop' : '0px'}, function(){
            $(this).children('.read-more').hide(); 
        });
    }
);

CSS: 

#menu-wrapper {
  position:fixed;
  bottom:0;
  width: 100%;
  z-index: 100;
  height: 50px;
}

Upvotes: 1

Related Questions