Prevent text from suddenly moving when content is changed by aligning text: center

Question

$(document).ready(function() {

  fade();

});


var fade = function() {

  $(".quotes").fadeOut(2000, function() {
    $(this).text("World")
  }).fadeIn(2000);

};

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

Run codeHide result

As you can see, the text "I" jumps after the function changes the text, due to the center of alignment of the text div.

How can I make this move as a slow transition rather than an istant leap?

Answer 1

Yeah!

Here is a very hacky trick. Place the element in the center inside the div. Then, while fading, make its width remain unchanged. Now, coming back, change the width to the width of the new text.

Working violin

$(document).ready(function() {
  fade()
});

var fade = function() {
  $(".wrapper").css("width", $(".quotes").width() + "px")
  $(".quotes").fadeOut(2000, function() {
    $(this).text("World")

    $(".quotes").fadeIn(2000)
    $(".wrapper").animate({
      width: $(".quotes").width() + "px"
    }, 2000)

  })

};

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.wrapper {
  display: inline-block;
  overflow: visible !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="wrapper"><span class="quotes">first quote</span></h2>
</div>

Run codeHide result

Answer 2

, , CSS text-align. margin-auto , width of 100% div aligned max-width ( ). :

https://jsfiddle.net/aodjgdhf/9/

$(document).ready(function() {
    
   fade();

});


var fade = function () {

    $(".quotes").fadeOut(2000, function() {
      $(this).text("World")
     }).fadeIn(2000);     
};

.iam{
    display: inline-block;
    -webkit-transition-property: all;
  -webkit-transition-duration: 3s;

}

#aligned{
    width: 100%;
	max-width: 300px;
	margin: 0 auto 5% ;
}

.quotes {
	display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
	<h2 class="iam">I am</h2>
	<h2 class="quotes">first quote</h2>
	</div>

Hide result

Answer 3

, . , opacity max-width. , max-width , .

var i=0;
var txt=["world","another text","first quote","lorem ipsum"]

var fade = function() {
  $(".quotes").animate({opacity:0,maxWidth:0},2000, function() {
    $(this).text(txt[i]);
  }).animate({opacity:1,maxWidth:180},2000);

};

$(document).ready(function() {
fade();
setInterval(function(){ 
  fade(); 
  i=(i+1)%4;
 
}, 5000);
});

.iam {
  display: inline-block;
  -webkit-transition-property: all;
  -webkit-transition-duration: 3s;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

Hide result

Answer 4

jQuery, :

$(document).ready(function() {
  setTimeout(function() {
    $(".quotes").fadeOut(1000, function() {
      $(".quotes").css("margin-right", "40px");
      $(".quotes").text("World");
    });

    $(".iam").animate({
      left: '12px'
    }, 2000);

    $(".quotes").fadeIn(1000);
  }, 1000);

});

.iam {
  display: inline;
  position: relative;
  margin-right: 12px;
}

#aligned {
  text-align: center;
  margin-bottom: 5%;
}

.quotes {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aligned">
  <h2 class="iam">I am</h2>
  <h2 class="quotes">first quote</h2>
</div>

Hide result