Javascript 使用jquery更改文本，可以'；我没有正确的过渡_Javascript_Jquery_Html_Css

Javascript 使用jquery更改文本，可以'；我没有正确的过渡

javascript jquery html css

Javascript 使用jquery更改文本，可以'；我没有正确的过渡,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个文本效果，但过渡并不完全符合我的喜好我正在替换一行居中文本中的单个单词，我使旧单词淡出，新单词淡入，但周围的文本“跳跃”。我已经尝试了一段时间，想知道如何通过在边距或宽度上使用动画，使它以某种方式滑动到新的位置，但我似乎无法理解这是我现在所拥有的一小部分我试图实现的目标与这里的大标题类似：代码如下： HTML: JavaScript（使用jQuery）： $（函数（）{ var t1=新数组（“变化”、“动态”、“酷”）； var i=0； var tid=setInter

我正在制作一个文本效果，但过渡并不完全符合我的喜好

我正在替换一行居中文本中的单个单词，我使旧单词淡出，新单词淡入，但周围的文本“跳跃”。我已经尝试了一段时间，想知道如何通过在边距或宽度上使用动画，使它以某种方式滑动到新的位置，但我似乎无法理解

这是我现在所拥有的一小部分

我试图实现的目标与这里的大标题类似：

代码如下：

HTML:

JavaScript（使用jQuery）：

$（函数（）{
var t1=新数组（“变化”、“动态”、“酷”）；
var i=0；
var tid=setInterval(
函数（）{
$（“#changingtext span”）。动画（{'opacity'：0}，1000，函数（）{
$（本）.text（t1[i]）；
}).animate（{'opacity'：1}，1000）；
如果（i


非常感谢 设置不透明度和宽度的动画
您可以设置一个对象数组，以包含下一个实例的理想宽度
var t1 = [ ['changing', '130px'], ['dynamic', '80px'], ['cool','150px'] ],
    i = 0;

var tid = setInterval( function() {

  $("#changingtext span")
  .animate({
    'opacity': 0,
    'width': t1[i][1] },
    500,
    function() {
      $(this).text( t1[i][0] );
    })
  .animate({'opacity': 1}, 1000);

  if(i < t1.length -1) 
    i++;
  else
    i = 0;

}, 3000 );

var t1=['changing'，'130px']，['dynamic'，'80px']，['cool'，'150px']，
i=0；
var tid=setInterval（函数（）{
$（“#改变文本跨度”）
.制作动画({
“不透明度”：0，
“宽度”：t1[i][1]}，
500,
函数（）{
$（本）.text（t1[i][0]）；
})
.animate（{'opacity'：1}，1000）；
如果（i


这是一个有点静态和繁琐的方式，但它应该让你在正确的方向出发
您可能可以通过将单词打印为span
列表，测量其宽度并将其添加到数组中来动态计算跨距的大小。
您的演示中缺少宽度，请查看此
HTML
<body>
    <h1><span id="chkWidth" style="display: none;"></span></h1>
    <h1 id="changingtext">This is <span>changing</span> text</h1>
</body>


这是变化的文本

脚本
$(function() {
  var t1 = new Array("changing", "dynamic", "cool");
  var i = 0;
  var width;
  var tid = setInterval(
      function() {
          $("#changingtext span").animate({'opacity': 0}, 1000, function () {
            $(this).text(t1[i]);
            width = $('#chkWidth').text(t1[i]).width();
            $(this).animate({'opacity': 1, 'width': width}, 1000);
        });

        if(i < t1.length -1) 
            i++;
        else i = 0;

      }, 3000 );

});

$（函数（）{
var t1=新数组（“变化”、“动态”、“酷”）；
var i=0；
var宽度；
var tid=setInterval(
函数（）{
$（“#changingtext span”）。动画（{'opacity'：0}，1000，函数（）{
$（本）.text（t1[i]）；
宽度=$（'#chkWidth'）.text（t1[i]）.width（）；
动画（{'opacity'：1，'width'：width}，1000）；
});
如果（i


希望这对您有所帮助。

祝你好运！处理.animate（）


一种更好的方法，无需第一次更改间隙/跳转
和动态计算的span
宽度：

CSS:
jQ:
函数“looping”只需调用上一个链接动画回调函数中的函数即可实现。
好，下面是我为您快速制作的一个工作示例：
正如您所看到的，我正在使用另一个隐藏的元素，它包含下一个字符串，用于计算正确的宽度-您现在只需要
 Fading out >>> Animating the width >>> Text >>> Fade in.

文本在淡出时不会跳跃，因为外部单词会向左/向右浮动
玩得开心
Jquery：
HTML:

这是
改变
文本


最简单的方法是固定
的宽度。除此之外的任何事情都将非常困难，因为浏览器不能让您对内联布局机制的工作方式有太多的控制。。。。您还可以设置跨度宽度的动画；这可能会有所帮助。我添加了一个链接，指向我正试图实现的类似目标，请参见此处的大标题：比我的想法更好+1:）不错，但同时扩展了它的一个小功能。@ShlomiHassid哈哈，好的，谢谢，刚刚将宽度动画移动到第一个动画回调中：）您现在喜欢吗？为可怜的人感到抱歉english@ShlomiHassid我得到它，编辑并添加了演示，看一看！
<body>
    <h1><span id="chkWidth" style="display: none;"></span></h1>
    <h1 id="changingtext">This is <span>changing</span> text</h1>
</body>

$(function() {
  var t1 = new Array("changing", "dynamic", "cool");
  var i = 0;
  var width;
  var tid = setInterval(
      function() {
          $("#changingtext span").animate({'opacity': 0}, 1000, function () {
            $(this).text(t1[i]);
            width = $('#chkWidth').text(t1[i]).width();
            $(this).animate({'opacity': 1, 'width': width}, 1000);
        });

        if(i < t1.length -1) 
            i++;
        else i = 0;

      }, 3000 );

});

h1 span{
    /* To prevent a jumpy misaligned SPAN due to widths change. */
    vertical-align:top; 
}

$(function() {

  var t=["changing", "dynamic", "cool"],
      $h1 = $("#changingtext"),
      $sp = $h1.find("span"),
      i=0,
      widths=[];

  $.each(t, function(i, v){
      var el = $('<span />', {text:v}).appendTo($h1);
      widths.push(el.width());
      el.remove();
  });

  $sp.css({opacity:0});

  (function loop(){
     i = ++i%t.length;    
     $sp.text(t[i]).animate({width:widths[i]}, 1000, function(){
       $(this).animate({opacity:1},1000).delay(3000).animate({opacity: 0}, 1000, loop); 
      });     
  })(); 

});

  $.each(t, function(i, v){
      var el = $('<span />', {text:v}).appendTo($h1);
      widths.push(el.width());
      el.remove();
  });

i = ++i%t.length;

 Fading out >>> Animating the width >>> Text >>> Fade in.

var words1 = new Array(  "dynamic", "changing", "cool");
var i1 = 0;
$("#next1").text($("#outer1").text()).hide();
$("#outer1").width($("#next1").width());

 var tid1 = setInterval(
 function() { 
     var word_in1;
     if (typeof  words1[i1+1] !='undefined') { word_in1 = words1[i1+1] } else { word_in1 =
    words1[0]; }
    var by_char_next1 = $("#next1").text('This is '+ word_in1 + ' text').width();
     $("#changingtext1").fadeOut(1000, function(){
         $("#outer1").animate({'width': by_char_next1 },1000,function(){
         $("#changingtext1").text(words1[i1]).fadeIn(1000);
         });
     });
    if (i1 < words1.length-1) i1++;
    else i1 = 0;
   }, 3000 );

  #outer1,
  #changingtext1
 {
 padding:0;
 margin:0;
 font-size: 40px;
 font-weight: bold;
 font-family: helvetica, arial, sans-serif;
}
#next1{
padding:0;
margin:0;
  font-size: 40px;
 font-weight: bold;
font-family: helvetica, arial, sans-serif;  
}

<center>
<div id='outer1' align='center'>
    <span style='float:left;'>This is</span>
    <span id="changingtext1">changing</span>
    <span style='float:right;'>text</span>
</div>
<br />
<span id='next1'></span>
</center>