如何使用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内容..

回答

相关问题