7

テキスト効果に取り組んでいますが、トランジションが完全に私の好みではありません。

中央揃えのテキスト行の 1 つの単語を置き換えています。古い単語をフェードアウトさせ、新しい単語をフェードインさせますが、周囲のテキストが「ジャンプ」します。余白や幅のアニメーションを使用して、どうにかして新しい場所にスライドさせる方法をしばらく考えていましたが、理解できないようです。

ここに私が今持っているものの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

3

同じ質問に対する別の回答を見る

ボン！最初のギャップ/ジャンプを変更せず、動的に計算された幅setIntervalを使用.animate()
するさらに優れたアプローチ:
span

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

});

このコードグループ

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

widths[]必要なすべての幅を配列内に格納します。繰り返しは、すでに行っているのと同じように
扱いますwidths[]t[]

単純なものを使用してテストする場所recursive self-invoking functionを作成するよりもsetIntervali0Modulo Operator (Reminder) %

i = ++i%t.length;

関数「ループ」は、最後のチェーン アニメーション コールバック内でその関数を呼び出すだけで実現されます。

于 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

わかりました、これは私がすぐにあなたのために作った実用的な例です:フィドル

あなたが見ることができるように、私は隠されており、正しい幅を計算するための次の文字列を含む別の要素を使用しています - 今必要なのは

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

外側の単語が左右に浮いているため、フェードアウト中にテキストがジャンプすることはありません。

楽しむ....

Jクエリ:

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 に答える