0

Gostaria de aplicar efeito slideDown(), em uma UL, porém gostaria que o efeito corresse de baixo para cima. Isto é, que a div abrisse de baixo para cima.

1
  • Já tentou com slideUp()?
    – Sam
    Commented 12/10/2017 às 18:48

2 Respostas 2

2

O slideUp embora possa parecer a solução apenas esconde o elemento, como podemos ver na documentação:

Description: Hide the matched elements with a sliding motion.

E por isso não irá servir para o que pretende. Pode resolver o problema utilizando o animate e aumentando o height.

Exemplo:

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>

Para fazer como que não dependa de um tamanho fixo pode fazer um aumento incremental com:

height: "+=50px"

Que aumenta 50px ao tamanho que tem, ou diminuir com:

height: "-=50px"
19
  • E por isso não irá servir para o que pretende Como assim? Ele não referiu que não queria esconder. Apenas queria algo como slideDown(). Commented 12/10/2017 às 19:20
  • @I_like_trains "a div abrisse de baixo para cima" faz me interpretar como abrir e não esconder. Poderei ter interpretado mais do que o AP disse mas é certamente algo que ele poderá esclarecer.
    – Isac
    Commented 12/10/2017 às 19:21
  • Sim, o que eu quero é só abrir a div de baixo para cima, não esconde-la. Vou estudar esse efeito porque é isso mesmo que preciso. O detalhe é que tenho uma label e a lista, às vezes abrirá abaixo da label, às vezes abrirá acima. Quando abaixo, o slideDown() resolve, mas quando acima, então não pois ficará estranho uma lista abrir de cima para baixo estado por acima da label que recebe o click de abre e fecha.Código completo aqui: pt.stackoverflow.com/questions/245333/… Commented 12/10/2017 às 19:37
  • Não consegui adaptar ao meu script. Commented 14/10/2017 às 14:16
  • @CarlosRocha Se conseguir montar um JSFiddle com o problema talvez consiga ajudar.
    – Isac
    Commented 14/10/2017 às 14:30
0

Use o .slideUp(), faz o o oposto do slideDown().

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .