3

我有一个小要求。我有一个带有三个带有文本的子 div 的 div。加载时，第一个文本将可见。3 秒后第一个隐藏，第二个可见。再过 3 秒后，第二个隐藏起来，第三个可见。这继续。

目前，我没有任何关于隐藏一个跨度和显示另一个跨度的动画。所以它看起来有点模糊。我想要的白色是在 Windows 8 磁贴上显示某种动画。就像隐藏的文本应该向上滑动并消失一样，要显示的文本应该从底部滑入。动画应该给用户一个流畅的体验。

我没有使用任何动画库。这可以通过 javascript / css 实现吗？下面是我的代码。任何想法都会很有用。

HTML：

<div class="dataflipping">
          <div class="first">FIRST TEXT</div>
          <div class="second">SECOND TEXT</div>
          <div class="third">THIRD TEXT</div>
</div>

JavaScript：

var srcElement = document.getElementsByClassName("dataflipping");

var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];

for (counter === 0; counter < elementChld.length; counter++) {
    elementArr.push(elementChld[counter]);
}

var elementCount = elementArray.length;


// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
    var ele = elementArray[counter];
    ele.style.display = "none";
}

counter = 0;


setInterval(function () {
    counter++;
    var prevElement = null;
    var curElement = null;

    if (counter === 1) {
        var prevElement = elementArr[elementCount - 1];
    }
    else {
        prevElement = elementArr[counter - 2];
    }

    curElement = elementArr[counter - 1];
    prevElement.style.display = "none";
    curElement.style.display = "block";


    if (counter === elementCount) {
        counter = 0;
    }
}, 3000);
  • 吉里哈
4

1 回答 1

1

如果我理解得很好。我认为更简单的方法是使用 MODULO，我写了这样的东西：

elementArr[counter%elementCount]

http://jsfiddle.net/t3N4A/

我认为你只需要尝试 make position:absolute; 就像我改变不透明度一样，您应该将其更改为左/顶部位置，更改 setInterval 函数的频率以使其更平滑并使其消失在您想要的位置。希望能有所帮助。

于 2013-06-13T21:51:01.830 回答