Slidedown from bottom to top

Asked

Viewed 208 times

0

I would like to apply effect slideDown(), in a UL, but I would like the effect to run from the bottom up. That is, that the div open from bottom to top.

jquery css css3

  • Ever tried with slideup()?

2 answers

2

The slideup although it may seem the solution just hides the element, as we can see in the documentation:

Description: Hide the Matched Elements with a Sliding motion.

And so it will not serve for what you want. You can solve the problem using the animate and increasing the height.

Example:

let direcao = "+";

$("button").on("click", function(){
  $("#d1").animate({height: direcao + "=50px"}, 1000);
  $(this).text(direcao == "-" ? "Mostrar Div" : "Fechar Div");
  direcao = direcao == "+" ? "-" : "+";
});
#d1 {
  background-color:cyan;
  position:absolute;
  bottom:0;
  width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1"></div>
<button>Mostrar Div</button>

To make it not dependent on a fixed size can make an incremental increase with:

height: "+=50px"

That increases 50px the size it has, or decrease with:

height: "-=50px"

  • And so it will not serve for what you want What do you mean? He didn’t say he didn’t want to hide it. He just wanted something like slideDown().

  • @I_like_trains "the div opened from the bottom up" makes me interpret how to open and not hide. I may have interpreted more than AP said, but it’s certainly something he can shed light on.

  • Yes, what I want is just to open the div from the bottom up, not hide it. I’m going to study that effect because that’s exactly what I need. The detail is that I have a label and the list, sometimes it will open below the label, sometimes it will open up. When below, the slideDown() solves, but when above, then it won’t be strange for a list to open from top to bottom state above the label that receives the click open and close.Complete code here: https://answall.com/questions/245333/optimizes%C3%A7%C3%A3o-de-c%C3%B3digo

  • I couldn’t adapt to my script.

  • @Carlosrocha If you can assemble a Jsfiddle with the problem maybe you can help.

  • I will do better: http://hotplateprensas.com.br/styles/, a select that has at the end of the page

  • https://jsfiddle.net/yscLh64g/2/

  • @Carlosrocha But what part should I animate up ? And how ? The list closes as soon as you click on any element of the list

  • So note that on the site, if you position select at the bottom of the page, options open up on the select box. Get it? Well, note that the slideDown() effect occurs from top to bottom. What I want is the opposite, that slideDown() occurs from bottom to top. But it’s not closing select, it’s actually opening. When select is on a part of the pages where, if you open the options box, it fits before the end of the page, then options open below the box, otherwise the options box opens above

  • @Carlosrocha But in the fiddle that put here the list is at the top soon not even open up. Moreover you do slideDown, here: $(".selectOptions ul li").css("display", "none").slideDown(400);. If you want to open up you can not do slideDown but a manual implementation with animate or css altering the height similarly to my reply

  • yes, forehead on the website please?

  • https://jsfiddle.net/yscLh64g/3/

  • So I tried to use your script but it didn’t work. I couldn’t actually.

  • @Carlosrocha You want to open different depending on where you are ? Quite complicated if you want my opinion. Enough code for little juice. But you have to interpret the position of the window relative to the element with $(window).scrollTop and have two different opening functions one for each case. And it is still able to have problems in it if the person opens the select with him at the end and end up walking up and closing already with him in the middle. Anyway it is a different problem than what is here in the question

  • That part of the select position already works. Just need to even open from the bottom up with Animate() that I was not able to do. You can check here: https://jsfiddle.net/yscLh64g/3/

  • @Carlosrocha Certainly not as you want but I commented almost everything leaving the minimum to show the application of the Animate, so you can see: https://jsfiddle.net/bx99rbtz/2/. The principle is to be based on the height of the list (ul) and not on display:block/none. It means she’s always visible but with height:0 and overflow:hidden, from there is merely changing the height to show or hide

  • Okay, so where did I go wrong now? https://jsfiddle.net/yscLh64g/4/

  • @Carlosrocha happens that the label is over the ul soon the effect is right but seems visually incorrect because by increasing the size of the ul goes up the label He’s on top of it. This is already positioning and can change in various ways, from modifying the order in html, changing the positioning to Fixed/Absolute in CSS, etc..

  • So, if it’s not too much to ask, switch to min in jsfiddle.net and create a new one running?

Show 14 more comments

0

Use the .slideUp(), does the opposite of slideDown().

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.