Databases
StackOverflow2013
Postsdbo
POShould be easy jQuery loop, but can't seem to figure out how to cycle through this
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShould be easy jQuery loop, but can't seem to figure out how to cycle through this
    text
    copied!<p>I'm building a feature on a website that shows a new "featured counselor" every 5 seconds or so. If it was just showing one pic I would just use show() &amp; hide(). Unfortunately I have to move the image out &amp; then display a div with some caption text, and then after 5 seconds, remove the caption &amp; the image. Fortunately I have successfully written the "show" function, and the "hide" function, AND I've even gotten it to wait the specified 5 seconds before hiding. My problem is that I can't figure out how to move to the next "featured counselor" and run the show-wait-hide functions. Any suggestions would be greatly appreaciate. Here's my code for reference:</p> <p>CSS:</p> <pre><code>article[role=main] aside li {/*Set up the basic stying &amp; hide them all*/ list-style: none; margin: 0px; padding: 0px; display: none; } article[role=main] aside li.show { /*Only show one at a time*/ display: block; } </code></pre> <p>HTML:</p> <pre><code>&lt;ul id="items"&gt; &lt;li class="show"&gt; &lt;a href="#"&gt; &lt;div class="caption"&gt; &lt;h5&gt;Featured Counselor&lt;/h5&gt; &lt;h3&gt;Courtney Humphrey&lt;/h3&gt; &lt;h4&gt;Registered Dietician&lt;/h4&gt; &lt;/div&gt;&lt;!-- End #caption --&gt; &lt;div class="featured-counselor"&gt; &lt;img src="img/featured_counselor_placeholder.jpg" /&gt; &lt;/div&gt;&lt;!-- End #featured-counselor --&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;div class="caption"&gt; &lt;h5&gt;Featured Counselor&lt;/h5&gt; &lt;h3&gt;Test Two Title&lt;/h3&gt; &lt;h4&gt;Registered Dietician&lt;/h4&gt; &lt;/div&gt;&lt;!-- End #caption --&gt; &lt;div class="featured-counselor"&gt; &lt;img src="img/featured_counselor_placeholder.jpg" /&gt; &lt;/div&gt;&lt;!-- End #featured-counselor --&gt; &lt;/a&gt; &lt;/li&gt; </code></pre> <p></p> <p>jQuery:</p> <pre><code>featuredCounselorCarousel(); //Call the function that runs the show function featuredCounselorCarousel() { showCurrentCounselor(); //Show the Counselor First setTimeout(function() { //Add a timer (Show for 5 seconds) hideCurrentCounselor() //After 5 seconds, hide the current counselor }, 5000) }// End featuredCounselorCarousel function showCurrentCounselor() { //This is the Function that shows the Counselor $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "0px"}, 900, 'easeInOutQuint');//Slide out $('article[role=main] aside ul li.show #caption').delay( 1000 ).fadeIn(400);//Display the Caption }// End showCurrentCounselor function hideCurrentCounselor() { //This is the Function that hides the Counselor $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "-230px"}, 900, 'easeInOutQuint');//Slide Back In $('article[role=main] aside ul li.show #caption').delay( 500 ).fadeOut(400);//Remove the Caption }// End hideCurrentCounselor </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload