7

我正在处理文本效果，但过渡并不完全符合我的喜好。

我正在替换一行居中文本中的一个单词，我使旧单词淡出，新单词淡入，但周围的文本“跳跃”。我一直在尝试弄清楚如何通过在边距或宽度上使用动画以某种方式使其滑动到新位置，但我似乎无法弄清楚。

这是我现在拥有的 JSfiddle http://jsfiddle.net/DEk7m/3/

我想要实现的目标类似于此处大标题中看到的内容：https ://gumroad.com/

这是代码：

HTML：

<h1 id="changingtext">This is <span>changing</span> text</h1>

CSS：

h1 {
text-align: center;
font-family: helvetica, arial, sans-serif;
}

JavaScript（使用 jQuery）：

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

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

      }, 3000 );

});

非常感谢！

4

4 回答 4

5

您的演示中缺少宽度，看看这个，

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 );

});

http://jsfiddle.net/DEk7m/8/

希望这会帮助你。

于 2013-05-05T14:26:47.340 回答
3

SEE ANOTHER ANSWER COVERING THE SAME QUESTION

BON! No need for setInterval when you deal with .animate()
An even better approach without the first change gap/jump
and with dynamically calculated span widths:

LIVE DEMO

CSS:

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

jQ:

$(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); 
      });     
  })(); 

});

This code group

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

stores inside our widths[] array all the needed widths we need.
We'll treat the widths[] iterations same as you already do for t[]

than we create a recursive self-invoking function (no need for setInterval !) where we'll test for i to become 0 using a simple Modulo Operator (Reminder) %

i = ++i%t.length;

The function "looping" is simply achieved recalling that function inside the last chained animation callback.

于 2013-05-05T14:44:55.450 回答
1

动画不透明度和宽度

您可以设置一个对象数组以包含接下来出现的每个实例的理想宽度。

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 );

JSFiddle 上的演示。

这是一种静态且繁琐的方式，但它应该让您朝着正确的方向前进。

您可以通过将单词打印为span列表、测量它们的宽度并将它们的宽度添加到数组中来动态地计算出跨度的大小。

于 2013-05-05T14:09:50.797 回答
0

好的，这是我快速为您制作的一个工作示例：fiddle

如您所见，我正在使用另一个隐藏的元素并包含下一个用于计算正确宽度的字符串 - 您现在需要的只是

 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 );

CSS：

  #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;  
}

HTML：

<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>
于 2013-05-05T15:47:16.740 回答