1

Boa noite! Estou fazendo uma aplicação e preciso de utilizar uns efeitos de slide. Utilizei o animate do jquery para obter o resultado desejado.

Ficou até bom, porém enquanto a animação ocorre a altura da div aumenta/diminui para que todo o texto dentro caiba, segue o exemplo:

$('#btnprincipal').click(function (){
  $('#divTexto').animate({ width: 'toggle' }, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnprincipal">Aperte aqui</button>

<div id="divTexto" style="background-color:#00ff00">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies erat massa, sed posuere risus pharetra sed. Integer in pretium tortor. Sed vestibulum orci ut odio lacinia fermentum. Ut nec nulla sed ligula finibus volutpat vel nec sem. Nulla aliquam mauris vel tortor sodales, id finibus est varius. Duis suscipit ultrices dolor, vitae molestie ex fringilla vitae. Suspendisse et sapien eu orci egestas volutpat quis vitae mauris. Curabitur nisl risus, maximus ac tristique sed, consequat quis risus. Nunc vel venenatis mi, eu faucibus arcu. Nunc quis faucibus sem. Vestibulum dignissim commodo lectus, sit amet iaculis metus lacinia ac. Integer placerat faucibus metus et consequat. Aliquam sed volutpat justo, vel pharetra nunc.</div>

O que posso fazer para previnir esse comportamento?

3
  • se difinir o height do div isso não deve acontecer, por exemplo height: 200px Commented 27/01/2021 às 0:19
  • Apaguei minha resposta, agora que vi a resposta aceita que entendi o propósito da pergunta :)
    – LeAndrade
    Commented 27/01/2021 às 0:59
  • Sim mas eu não podia definir o height porque o texto era gerado de acordo com o que o usuario digitasse, nisso que travei. A resposta aceita deu a solução para o problema Commented 27/01/2021 às 2:05

1 Resposta 1

3

Para que o overflow funcione como esperado, é necessário que a div tenha a altura definida. Porém, não pode definir uma altura estática, pois ela varia de acordo com o conteúdo (texto) e eventualmente de acordo com o tamanho do viewport.

A minha sugestão é definir apenas a altura enquanto a animação está a decorrer e remove-la assim que a animação termine. Para isso podemos utilizar os callbacks start e done.

Algo como o seguinte código:

$('#btnprincipal').click(function (){
  const divTexto = $('#divTexto');
  
  divTexto.animate(
    { width: 'toggle' },
    {
      duration: 500,
      start: () => {
        divTexto.css('height', divTexto.height());
      },
      done: () => {
        divTexto.css('height', 'auto');
      },
    },
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnprincipal">Aperte aqui</button>

<div id="divTexto" style="background-color:#00ff00">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies erat massa, sed posuere risus pharetra sed. Integer in pretium tortor. Sed vestibulum orci ut odio lacinia fermentum. Ut nec nulla sed ligula finibus volutpat vel nec sem. Nulla aliquam mauris vel tortor sodales, id finibus est varius. Duis suscipit ultrices dolor, vitae molestie ex fringilla vitae. Suspendisse et sapien eu orci egestas volutpat quis vitae mauris. Curabitur nisl risus, maximus ac tristique sed, consequat quis risus. Nunc vel venenatis mi, eu faucibus arcu. Nunc quis faucibus sem. Vestibulum dignissim commodo lectus, sit amet iaculis metus lacinia ac. Integer placerat faucibus metus et consequat. Aliquam sed volutpat justo, vel pharetra nunc.</div>

1
  • Muitíssimo obrigado! Não sabia como solucionar o problema de ter a minha altura variável, isso resolve meu problema Commented 27/01/2021 às 0:26

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 .