CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jack
Jack

Reputation: 43

How do I slide up a div off container with moving effect in jquery?

This is my fiddle:

https://jsfiddle.net/XiangXu/rf6tdw4s/17/

<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

.slide {
  position: relative;
  height: 100px;
  background-color: yellow;
}
.slide .innerTop {
  position: absolute;
  top: 0px;
}
.slide .innerBottom {
    position: absolute;
  bottom: 0px;
}

$("#slide").click(function() {
  $("#top").slideToggle();
  $("#bottom").slideToggle();
});

The bottom one is no problem which moves down off the container. But the top one is like there is something erasing it from bottom to top instead of moving it!

How do I move it off the container like the bottom one?

Upvotes: 1

Views: 2001

Answers (3)

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can't do it with jQuery's .slideUp() and .slideDown() function because it animates height of the element. However you can add class on click and use css transform for styling them.

$("#slide").click(function() {
  $("#top, #bottom").toggleClass('hidden');
});
.slide {
  position: relative;
  height: 100px;
  background-color: yellow;
  overflow: hidden;
}

.slide .innerTop,
.slide .innerBottom {
  transition: transform 0.25s linear;
  transform: translateY(0);
}

.slide .innerTop {
  position: absolute;
  top: 0px;
}
.slide .innerTop.hidden {
  transform: translateY(-100%);
}

.slide .innerBottom {
  position: absolute;
  bottom: 0px;
}
.slide .innerBottom.hidden {
  transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

Upvotes: 2

Ashish Kumar
Ashish Kumar

Reputation: 3039

You can do it with toggling a css class.

  • Add a class hidden when want to hide it
  • set position of the elements out of the box making it negative
  • set overflow:hidden of the container.

Here is a working example:

$("#slide").click(function() {
  $("#top, #bottom").toggleClass("hidden"); // toggle CSS class on click
});
.slide {
  position: relative;
  overflow: hidden; /* setting overflow hidden */
  height: 100px;
  background-color: yellow;
}

.slide .innerTop {
  position: absolute;
  top: 0px;
}

.slide .innerBottom {
  position: absolute;
  bottom: 0px;
}

#top,
#bottom {
  transition: 0.25s linear;  /* adding animation */
}

#top.hidden {
  top: -30px;  /* making out of the visible area */
}

#bottom.hidden {
  bottom: -30px; /* making out of the visible area */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="slide">slide it</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

Upvotes: 1

Mahendra Kulkarni
Mahendra Kulkarni

Reputation: 1507

Here is working example,

$("#slide").click(function() {
  $("#top").slideToggle();
  $("#bottom").slideToggle();
});
$("#slideDown").click(function() {
 $("#top").slideDown();
 $("#bottom").slideDown();
});
$("#slideUp").click(function() {
 $("#top").slideUp();
 $("#bottom").slideUp();
});

	 
.slide {
  position: relative;
  height: 100px;
  background-color: skyblue;
  
}

.slide .innerTop {
  position: absolute;
  top: 0px;
  padding: 8px;
  background-color: #acacac;
}

.slide .innerBottom {
  position: absolute;
  bottom: 0px;
  padding: 8px;
  background-color: #acacac;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><button id="slide">slide it</button>
<button id="slideDown">slide Down</button>

<button id="slideUp">slide Up</button>
<div id="slidebottom" class="slide">
  <div class="innerTop" id="top">Slide from top</div>
  <div class="innerBottom" id="bottom">Slide from bottom</div>
</div>

Upvotes: 0

Related Questions