CODEWITHSUNDEEP
jquery
kfirba
kfirba

Reputation: 5441

Sliding from Down to Up

I got a <div> which I would like to slide from Down to Up instead of Up to Down.

When I tried:$('#div_slide').slideDown(1000); the <div> didn't even show. when I do:

$('#div_slide').slideUp(1000);

it does work, but slides from the very top to the very bottom, and I want it to be the opposite, to open itself from DOWN to UP, from the Bottom to the Top.

How do I do that?

Upvotes: 1

Views: 1227

Answers (1)

Deadlock
Deadlock

Reputation: 1577

CSS 

 .block {
    position: relative;
    width: 320px;
    height: 260px;
    display: block;
    background: pink;
    margin: 0 auto;
    overflow: hidden;
}
.slidemeup{
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: none;
    width: 260px;
    height: 40px;
    padding: 20px;
}

HTML

    <div class="block">
    <div class="slidemeup">
    this will slidedown in revwrse direction</div>
    </div>

JS

jQuery(".block").hover(
    function(){
        jQuery(".slidemeup").slideDown();
    },
    function(){
    jQuery(".slidemeup").slideUp('fast');
});

Check out this working jsfiddle here

Upvotes: 3

Related Questions