使用过渡更改 <p> 元素的 innerHTML

Question

我是网页设计的新手。我想要完成的是不断更改 <p> 元素中的一些文本，并带有过渡效果（某种幻灯片）。

这是我的代码：

  <p id="qu">Some text</p>
   <script>
    var i = 0;
    function loop(){
        var text = ['new text 1', 'new text 2', 'new text 3']
        document.getElementById("qu").innerHTML = text[i];
        i = (i == 3)?0:i=i+1;
    }
    setInterval(loop, 1000);
    </script>

现在，我的代码运行良好，但 如何在更改 innerHTML 时添加“向左滑动”过渡？

Answer 1

查看DEMO

$('#qu').animate({'margin-left' : '-=40px'});

jQuery animate() 可让您在 DOM 元素上执行所需的动画。

---

普通的javascript：

margin = margin-40; //please add your parameter here.

document.getElementById("qu").style.marginLeft = (margin)+"px";