How do I actively alternate text being displayed on a page by a specific time?

Preferably using Jquery(css or html is fine), how do I alternate text that is displayed by duration? An example would be like the Groundswell PR page.

Answers


I have created a working example for you ****HERE**** using jQuery animate() and setTimeout functions. If you want to add more text in the loop, just add a new div with textDiv class and the p tag. You also need to change maxCount variable in the jQuery code to the number of texts in the loop.

HTML:

<div class="container">
  <div class="textDiv"><p class="text1"> This is text 1</p></div>
  <div class="textDiv"><p class="text2"> Another text to show how it works</p></div>
</div>

CSS:

* {box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  height: 200px;
  width: 400px;
  margin: 20px auto;
  background: #d9f9fc;
  text-align: center;
  border-radius: 10px;
}

.textDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  width: 100%;
  font-size: 2em;
  font-weight: bold;
  text-transform: uppercase;
  color: rgba(0,0,0,1);
  -webkit-transform: translateX(-50%) translatey(-50%);
    -moz-transform: translateX(-50%) translatey(-50%);
    transform: translateX(-50%) translatey(-50%);
}
.text2 {
  opacity:0;
}

jQuery:

$(document).ready(function() {
   var count = 1;
   var maxCount = 2;
   textAnimate(count,maxCount);
});

function textAnimate(count,maxCount) {
    $(".text"+count).animate({
       opacity: '0'
    }, { duration: 300, queue: false });

    count++;
    if (count > maxCount) {count = 1;}

    $(".text"+count).animate({
       opacity: '1'
    }, { duration: 300, queue: false });

    window.setTimeout(function() { textAnimate(count,maxCount) }, 1000);
}

Need Your Help

UnsatisfiedLinkError with javafx

javafx unsatisfiedlinkerror jcreator

I am trying do learn javafx. I have a very simple program to print "Hello World" once in the main method (as a test) and once in the Application. The code looks like this:

get records from two same tables with some condition

mysql select stored-procedures if-statement

I have 2 tables Test1 and Test1Update with following structure