title: jQuery - reverse action
body: <p>First of all I know that the code is ugly, but I am a beginner with JS, so please understand me.</p>
  
  <p>This is what I have done to this time. What I have to do? Step by step:</p>
  
  <ol>
  <li>click on #img1 and then loop start...</li>
  <li>#img1 change from green to red image and #text1 too (from green to red)</li>
  <li>then after some time #img1 and #text1 back too default values (all green)</li>
  <li>#img2 and #text2 do all the same (automatic, without click)</li>
  <li>all the same to the last #img5 and #text5</li>
  </ol>
  
  <p>Between changing every li should be few seconds pause. Please help me!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="li-1"&gt;&lt;img id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;&lt;p id="text1"&gt;Text&lt;/p&gt;&lt;/li&gt;
    &lt;li class="li-2"&gt;&lt;img id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;&lt;p id="text2"&gt;Text&lt;/p&gt;&lt;/li&gt;
    &lt;li class="li-3"&gt;&lt;img id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;&lt;p id="text3"&gt;Text&lt;/p&gt;&lt;/li&gt;
    &lt;li class="li-4"&gt;&lt;img id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;&lt;p id="text4"&gt;Text&lt;/p&gt;&lt;/li&gt;
    &lt;li class="li-5"&gt;&lt;img id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;&lt;p id="text5"&gt;Text&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var count = 0;
  function images() {
    if (count == 0) {
      $('#img1').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text1').css('color', 'red');
      count++;
    } else if (count == 1) {
      $('#img2').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text2').css('color', 'red');
      count++;
    } else if (count == 2) {
      $('#img3').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text3').css('color', 'red');
      count++;
    } else if (count == 3) {
      $('#img4').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text4').css('color', 'red');
      count++;
    } else if (count == 4) {
      $('#img5').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text5').css('color', 'red');
      count++;
    }
  }
  setInterval(images, 1000);
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var count = 0;
  
  function images() {
    if (count == 0) {
      $('#img1').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text1').css('color', 'red');
      count++;
    } else if (count == 1) {
      $('#img2').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text2').css('color', 'red');
      count++;
    } else if (count == 2) {
      $('#img3').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text3').css('color', 'red');
      count++;
    } else if (count == 3) {
      $('#img4').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text4').css('color', 'red');
      count++;
    } else if (count == 4) {
      $('#img5').attr('src', "http://www.freeiconspng.com/uploads/red-circle-icon-1.png");
      $('#text5').css('color', 'red');
      count++;
    }
  }
  setInterval(images, 1000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    padding: 0 250px;
    margin-left: 100px;
    display: flex;
  }
  ul .li-1 {
    list-style: none;
    margin-right: 10px;
  }
  ul .li-1 img {
    width: 100px;
  }
  ul .li-1 p {
    padding: 0;
    margin: 0;
    color: #00875b;
    font-size: 38.89px;
    text-align: center;
    text-transform: uppercase;
  }
  ul .li-2 {
    list-style: none;
    margin-right: 10px;
  }
  ul .li-2 img {
    width: 100px;
  }
  ul .li-2 p {
    padding: 0;
    margin: 0;
    color: #00875b;
    font-size: 38.89px;
    text-align: center;
    text-transform: uppercase;
  }
  ul .li-3 {
    list-style: none;
    margin-right: 10px;
  }
  ul .li-3 img {
    width: 100px;
  }
  ul .li-3 p {
    padding: 0;
    margin: 0;
    color: #00875b;
    font-size: 38.89px;
    text-align: center;
    text-transform: uppercase;
  }
  ul .li-4 {
    list-style: none;
    margin-right: 10px;
  }
  ul .li-4 img {
    width: 100px;
  }
  ul .li-4 p {
    padding: 0;
    margin: 0;
    color: #00875b;
    font-size: 38.89px;
    text-align: center;
    text-transform: uppercase;
  }
  ul .li-5 {
    list-style: none;
  }
  ul .li-5 img {
    width: 100px;
  }
  ul .li-5 p {
    padding: 0;
    margin: 0;
    color: #00875b;
    font-size: 38.89px;
    text-align: center;
    text-transform: uppercase;
  }
  img {
    width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li class="li-1"&gt;
      &lt;img id="img1" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;
      &lt;p id="text1"&gt;Text&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="li-2"&gt;
      &lt;img id="img2" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;
      &lt;p id="text2"&gt;Text&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="li-3"&gt;
      &lt;img id="img3" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;
      &lt;p id="text3"&gt;Text&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="li-4"&gt;
      &lt;img id="img4" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;
      &lt;p id="text4"&gt;Text&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="li-5"&gt;
      &lt;img id="img5" src="http://www.freeiconspng.com/uploads/green-circle-icon-28.png" /&gt;
      &lt;p id="text5"&gt;Text&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Change to this image --&gt;
  &lt;img src="http://www.freeiconspng.com/uploads/red-circle-icon-1.png" /&gt;</code></pre>
  </div>
  </div>
  </p>