使用转换</p>更改<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";