javascript - 使用过渡更改 <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";