How to change text smoothly?

Question

How to change text smoothly?

Navigation

#1 by (5 votes)

0

I'm using BootstrapDialog and I have to change the text frequently, I would like a tip on how to handle this, follow the example:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        dialogRef.getModalBody().html('Segunda mensagem');

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>

When the sizes of the messages are different the dialog gives an ugly break, I wanted to make this transition smoother, so the dialog would have to increase or decrease smoothly too

bootstrap-3 dialog

asked by anonymous 11.06.2016 / 02:58

1 answer

Is it possible to add connection string within a class? Problems making ajax call with checkbox

score 5 · Accepted Answer

And how about a fadeIn / fadeOut to make the transition less aggressive:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        var bodyEl = dialogRef.getModalBody();

        bodyEl.fadeOut(function() {
          $(this).text("Segunda mensagem")
        }).fadeIn();

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>