title: Changing <li> css automatically
body: <p>I have a Slider that start automatically. I want that when a certain image appear, the right subject in .menu-li will become font-weight:bold. If i'm not clear enough, there is a good example here: <a href="http://bxslider.com/examples/auto-show-start-stop-controls" rel="nofollow">http://bxslider.com/examples/auto-show-start-stop-controls</a> -> only here the slider is not working automatically with setInterval.</p>
  
  <pre><code>    var autoSlider = "";
      var startRefresh = function() {
      if (autoSlider !== "") {
          return;
      }
  
      autoSlider = setInterval(function() { 
          $('#slideshow &gt; div:first')
          .fadeOut(300)
          .promise().done(function() {
              $('#slideshow &gt; div:first').next()
              .fadeIn(300)
              .end()
              .appendTo('#slideshow');
          });
  
      },  5000);
  };
  startRefresh();
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>            &lt;ul class="menu-ul"&gt;
                  &lt;li class="menu-li a"&gt;travel&lt;/li&gt;
                  &lt;li class="menu-li b"&gt;sport&lt;/li&gt;
                  &lt;li class="menu-li c"&gt;real estate&lt;/li&gt;
                  &lt;li class="menu-li d"&gt;hotels&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>