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?
height
do div isso não deve acontecer, por exemploheight: 200px