jQuery Animate() with unwanted behavior

Question

Good evening! I am making an application and need to use some slide effects. I used the animate jquery to get the desired result.

It was even good, but while the animation occurs the height of the div increases/ decreases so that all the text inside fits, follows the example:

$('#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>

What can I do to prevent this behavior?

Answer 1

So that the overflow function as expected, it is necessary that the div has the set height. However, you cannot set a static height because it varies according to the content (text) and eventually according to the size of the viewport.

My suggestion is to set just the height while the animation is going on and remove it as soon as the animation is over. For this we can use the callbacks start and done.

Something like the following code:

$('#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>