如何使用jquery動畫HTML內容..

我有一個HTMl文本動態更改。現在根據我的要求，我必須以動畫形式顯示它們，如淡入淡出和某些動作，但我不知道這一點.. 這裏是我的代碼..如何使用jquery動畫HTML內容..

<script type="text/javascript"> 
     var v = {}; 
     v[0] = "Your Text<br/>Hello"; 
     v[1] = "Your Text2<br/>Hello2"; 
     v[2] = "Your Text3<br/>Hello3"; 

     var i = 0; 

     window.setInterval(function() { 
      $("#dynamicMessage").html(v[i]); 
      if (i == 2) { 
       i = 0; 
      } else { 
       i = i + 1; 
      } 

     }, 10000); 
</script>

請看看，讓我知道我可以動畫我的文字內容中的HTML .. 謝謝..

來源

2014-10-09 Hansal Mehta

在jQuery中可以使用fadeIn，fadeOut效果。這是一個動畫顯示/隱藏 – andrex 2014-10-09 12:17:58

你可以使用的組合和fadeIn()

$("#dynamicMessage").fadeOut("slow", function() { 
    $("#dynamicMessage").html(v[i]).fadeIn('slow'); 
})

檢查這個演示 - http://jsfiddle.net/xw2j6hsp/1/

UPDATE

看到這個評論，在@laruiss答案：

「如果有通過，我可以顯示文本從彈出左其他方式」

以爲我會這樣的代碼爲你準備。只需添加一些動畫。檢查 - http://jsfiddle.net/m6bnq1ja/

來源

2014-10-09 12:21:13 Alex

有沒有動畫的內容變化。你可以做的是隱藏元素，改變它的內容，然後淡入，像下面的東西。它可能看起來與用戶相同。

$("#dynamicMessage").hide().html(v[i]).fadeIn();

或

$("#dynamicMessage").fadeOut(500, function() { 
    $(this).html(v[i]).fadeIn(500); 
});

來源

2014-10-09 12:19:47 artm

不要忘記clearTimeout（或clearInterval）

var v = [ 
     "Your Text<br/>Hello", 
     "Your Text2<br/>Hello2", 
     "Your Text3<br/>Hello3" 
    ], 
    i = 0, 
    timeout = null, 
    change = function (text) { 
     var $dynamicMessage = $("#dynamicMessage") 
      .fadeOut("slow", function() { 
       $dynamicMessage.html(text).fadeIn(); 
      }); 
     if (i == 2) { 
      i = 0; 
     } else { 
      i = i + 1; 
     } 
     timeout = window.setTimeout(function() {change(v[i]);}, 2000); 
    } 
change(v[i]); 

$(window).unload(function() {window.clearTimeout(timeout); timeout = null;});

JSFiddle

來源

2014-10-09 12:30:42 laruiss

謝謝..它的工作..如果有其他方式，我可以顯示從左側彈出的文本，並慢慢地動畫，因爲它是顯示在你的小提琴 – 2014-10-09 12:34:50

我不知道你在問什麼，但使用jQuery UI，您可以使用幻燈片效果：http://jsfiddle.net/u41pkxk1/1/ – laruiss 2014-10-09 12:49:05

var v = {}; 
    v[0] = "Your Text<br/>Hello"; 
    v[1] = "Your Text2<br/>Hello2"; 
    v[2] = "Your Text3<br/>Hello3"; 

     var i = 0; 
     window.setInterval(function() { 
     $("#dynamicMessage").fadeToggle("slow", function() { 
      $("#dynamicMessage").html(v[i]).fadeToggle('slow'); 
     }); 
     if (i == 2) { 
      i = 0; 
     } else { 
      i = i + 1; 
     } 

    }, 4000);

注意：您還可以用「淡出」 & 「淡入」代替「 fadeToggle「

來源

2014-10-09 12:43:44 Priyank

如何使用jquery動畫HTML內容..

回答

相關問題