SlideUp effect with jQuery and CSS

Question

I'm struggling to fix my slide up effect.

I want the yellow div to move up by 200px. Right now it's moving down by 40px :(

Can someone assist?

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});

h1 {
  font-size:72px;
  margin:100px 0;
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
/*.one:hover + .two {
    top: 0px;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<h1>
Let's test this!
</h1>

<div class="container">
    <div class="one">Click me to reveal new div</div>
    <div class="two">I slid!
        <br>And I am higher than the div before me...</div>
</div>

Sauced Apples · Accepted Answer · 2016-02-03 14:13:29Z

2

Is this what you are looking for?

http://jsfiddle.net/m3nwm63x/4/

I have moved <div class="two"> about one.

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "40px"});
    }
});

h1 {
  font-size:72px;
  margin:100px 0;
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
    overflow: hidden;
    height: 40px;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}
/*.one:hover + .two {
    top: 0px;
}*/

<h1>
Let's test this!
</h1>

<div class="container">
    <div class="two">I slid!
        <br>And I am higher than the div before me...</div>
    <div class="one">Click me to reveal new div</div>
</div>

edited Feb 3, 2016 at 14:13

answered Feb 3, 2016 at 14:10

Sauced Apples

1,1712 gold badges15 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

michaelmcgurk Over a year ago

Thank you so much for the detailed response. Is it possible once opened, it slides down again rather than slides up?

Sauced Apples Over a year ago

@michaelmcgurk I have also just edited and given the blue div a height of 40px to allow the yellow div to be fully hidden. If this is the answer you were looking for, please click the green tick :)

michaelmcgurk Over a year ago

Amazing - thank you so much!! One quick question, why does the first click instantly reveal rather than gradually?

Sauced Apples Over a year ago

I can't be 100% sure, as if you keep clicking, only the first animation is fast every subsequent is the same slower speed.

Collectives™ on Stack Overflow

SlideUp effect with jQuery and CSS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related