每隔几秒更换一个元素并与动画同步

最近我一直在学习一些JavaScript来改进我的页面。每隔几秒更换一个元素并与动画同步

我试图做一个简单的练习，其中我每5秒更换一个元素，但是当我试图添加一个淡入淡出动画与CSS并且仅适用于第一次，在这一点上，我真的不知道我的javascript的写法不正确，或者与我的CSS有关。

能有更多知识和经验的人给我一些提示吗？

好了，所以基本上这个问题是我不能让动画重复类似的句子，您可以点击此处查看：

//Calling the element. 
 
var $slogan = document.getElementById("slogan"); 
 

 
// Setting an array with several strings. 
 
var sloganArray = ["This sentence will change every 5 seconds!", "See? I'm changing!", "Knock Knock.", "Who's there?", "Heck I don't know!"]; 
 

 
//Setting variable to control the index. 
 
var sloganIndex = 0; 
 

 
/* This function (only when called) replaces the text of the element called before with text contained on the strings of the array, each time incrementing one and going through every array position. */ 
 
function changeSlogan() { 
 
    $slogan.innerHTML = sloganArray[sloganIndex]; 
 
    ++sloganIndex; 
 
    if (sloganIndex >= sloganArray.length) { 
 
     sloganIndex = 0; 
 
    } 
 
    } 
 

 
//Calling the function created before every five seconds. 
 
setInterval(changeSlogan,5000);

#slogan { 
 
    margin: 0; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 20px; 
 
    color: #000; 
 
    opacity: 1; 
 
    transition: opacity .3s ease-out; 
 
    -webkit-animation:fadeIn ease-out ; 
 
    -moz-animation:fadeIn ease-out ; 
 
    animation:fadeIn ease-out; 
 
    -webkit-animation-fill-mode:forward; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
 
    -moz-animation-fill-mode:forward; 
 
    animation-fill-mode:forward; 
 
    -webkit-animation-duration: 1.5s; 
 
    -moz-animation-duration: 1.5s; 
 
    animation-duration: 1.5s; 
 
    -webkit-animation-delay: 4.9s; /* Chrome, Safari, Opera */ 
 
    animation-delay: 4.9s; 
 
    animation-iteration-count: infinite; 
 
}

<h3 id="slogan"><em>This is a dynamic sentence!</em></h3>

谢谢你的时间！

来源

2014-09-27 csalmeida

我会建议使用仅 CSS和没有 JavaScript，请情况。我创建了三个效果。使用.slogan, .slogan up, .slogan down并将变化的元素放置在<p>元素内，如下所示。

检查和CSS这里：http://jsfiddle.net/csdtesting/ncmctw65/1/

HTML文件设置：

<div class="wrapper"> 
    <h3>Cool fading text only with css try .slogan, .sloga down, .slogan up </h3> 
    <div class="slogan down"> 
     <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">This sentence will change every 5 seconds!</a></p> 
     <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">See? I'm changing!</a></p> 
     <p><a href="http://www.hongkiat.com/blog/automate-dropbox-files-with-actions/">Who's there?</a></p> 
     <p><a href="http://www.hongkiat.com/blog/wordpress-related-posts-without-plugins/">eck I don't know!</a></p> 
    </div> 
</div>

希望你喜欢的！

来源

2014-09-27 19:06:58

哇，这真的很酷，做得很好。非常感谢你，非常强大的动画，它可以帮助我更好地理解一些CSS方面。但是我现在真的专注于Javascript，你认为这有一个解决方案，或者它的结构不完善？谢谢！ – csalmeida 2014-09-27 19:52:19

如果你想尝试jQuery是更容易。 http://jsfiddle.net/mdesdev/b3t5k/。或纯CSS与CSS：http://jsfiddle.net/qrc8m/。 – 2014-09-27 19:57:53

谢谢你分享你的知识，这是非常好的。如果可以的话，给我一些建议，我应该先学习一点javascript还是直接进入jQuery？再次感谢。 – csalmeida 2014-09-27 21:56:48

每隔几秒更换一个元素并与动画同步

回答

相关问题