2013-11-01 63 views
1

當使用動畫改變HTML中的某些內容時,jquery animate'移動'/將文本左右移動,而不是僅替換文本。Jquery動畫移動文本

入住這裏:http://jsfiddle.net/x2VYn/

function cycleIntro() { 
     var whoArr = ["colleagues", "girlfriend", "homies", "nemesis", "lover", "dad", "mom", "brother", "sister", "enemies", "friends", "classmates", "best friend", "imaginary friend", "grandma'"]; 
     var whatArr = ["pool", "backgammon", "dart", "chess", "ping pong", "bob", "headsup poker", "ludo", "yatzy", "foosball", "tennis", "street basket", "golf", "water polo"]; 

     var whotxt = whoArr[Math.floor(Math.random() * whoArr.length)]; 
     while ($("#intro #who").html() == whotxt) { 
      whotxt = whoArr[Math.floor(Math.random() * whoArr.length)]; 
     } 
     var whattxt = whatArr[Math.floor(Math.random() * whatArr.length)]; 
     while ($("#intro #what").html() == whattxt) { 
      whattxt = whatArr[Math.floor(Math.random() * whatArr.length)]; 
     } 
     $("#intro #who").animate({ width: "toggle" }, 200, function() { 
      $("#intro #who").html(whotxt).animate({ width: "toggle" }, 300, function() { 
       $("#intro #what").delay(50).animate({ width: "toggle" }, 200, function() { 
        $("#intro #what").html(whattxt).animate({ width: "toggle" }, 300, function() { 
         setTimeout(cycleIntro, 1500); 
        }); 
       }); 
      }); 
     }); 
    } 
    setTimeout(cycleIntro, 1500); 

有誰知道如何調整呢?

回答

1

設置vertical-align您操作的跨度屬性bottom可修復此問題。我已經更新了小提琴here

+0

使用高度不能解決問題。 '寬度'是我希望它看起來的樣子。但是,每當切換單詞時都會發生錯誤 - 它似乎插入了某種填充/頁邊距,這會移動/移動文本。 – 2mas

+0

對不起!我誤解了這個問題。請看我更新的答案。 – Csarsam

+0

太棒了!那肯定會有訣竅!非常感謝! – 2mas