当内容被文本对齐:居中时，防止文本突然移动

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

As you can see the text "I am" jumps after the function change the text, because of the text align center of the div.

如您所见，由于div的文本对齐中心，在函数更改文本后文本“I am”会跳转。

How can I make this movement like a slow transition and not an istant jump?

我怎样才能使这个动作像一个缓慢的过渡而不是一个持续的跳跃?

4 个解决方案

#1

Aha!

啊哈!

Here's a very hacky trick. Put the element to be centered inside a wrapper div. Then, while fading, force it's width to remain the same. Now while fading it back in, animate the width to the width of the new text.

这是一个非常陈腐的把戏。将元素放在包装器div中居中。然后，在淡入时，强制它的宽度保持不变。现在，当把它淡入，动画宽度到新的文本的宽度。

Working fiddle

工作小提琴

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

#2

This is a gnarly one since I don't think that you can animate the text-align CSS property. A workaround would be using margin-auto instead where you set a width of 100% to the container div aligned with an arbitrary max-width (this being the only caveat). See fiddle below:

这是一个奇怪的例子，因为我不认为你可以将文本对齐的CSS属性动画化。另一种解决方案是使用margin-auto，将宽度设置为100%，并与任意的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>

#3

Here is another way that doesn't involve a lot of changes and can be generic. The idea is to animate opacity and max-width at the same time. Simply make sure the value of max-width is enough big for the text you are using.

这里有另一种方法，它不涉及很多更改，而且可以是通用的。这个想法是为了使不透明度和最大宽度同时出现。只要确保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>

#4

By playing a bit with the margins, and using jQuery's animate, you can code the following:

通过使用一些边距，并使用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>

#1