Databases
StackOverflow2013
Postsdbo
POjQuery fadeIn elements one at a time with onClick
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery fadeIn elements one at a time with onClick
    text
    copied!<p>I'm trying to create a really basic slideshow where the user can click a back or next arrow to see the previous or next element. I have found various questions similar to this but they are automated transitions; I'm looking for the element to switch one at a time onclick. If next is clicked it should go forward, if back is clicked, it should go back. If someone clicks back from the first time, it should show the last; if they click Next when they're on the last one, it will go back to the first.</p> <p>The code I have currently cycles through multiple elements. I'm new at this so I'm having trouble figuring out how to get it to go only one at a time. This has to work with jQuery 1.3.2, as the site I uses has that library loaded and we can't update it. </p> <p>It doesn't have to be LI, could be div too if that's better for some reason. Any suggestions on how to achieve are appreciated.</p> <p>here is a <a href="http://jsfiddle.net/v4npL/" rel="nofollow noreferrer">link to my fiddle</a>, but basic HTML would be:</p> <pre><code> &lt;div id="arrow-next"&gt;&lt;/div&gt; &lt;div id="arrow-back"&gt;&lt;/div&gt; &lt;ul class="services"&gt; &lt;li style="display: block;"&gt;slide 1&lt;/li&gt; &lt;li&gt;slide 2&lt;/li&gt; &lt;li&gt;slide 3&lt;/li&gt; &lt;li&gt;slide 4&lt;/li&gt; &lt;li&gt;slide 5&lt;/li&gt; &lt;li&gt;slide 6&lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>css:</strong></p> <pre><code> ul.services li{ height: 500px; width: 980px; border: 1px solid #ccc; text-align: center; list-style-type: none; position: absolute; top: 0; left: 0; display: none; background-color: #fff; } ul.services { display: inline-block; position: relative; } </code></pre> <p><strong>jquery:</strong></p> <pre><code> $(document).ready(function() { $("#arrow-next").click(function() { $('ul.services li').fadeOut(function(){ $(this).next().fadeIn('slow'); }); }); $("#arrow-back").click(function() { $('ul.services li').fadeOut(function(){ $(this).prev().fadeIn('slow'); }); }); }); </code></pre> <p>Thanks in advance for any help you can offer. I found <a href="https://stackoverflow.com/questions/7539199/jquery-fadein-one-element-after-fadeout-the-previous-div">this post</a> and tried to update like so, but it does not change what happens with the code I already had.</p> <pre><code> $(document).ready(function() { $("#arrow-next").click(function() { $('ul.services li').fadeOut(function(){ $(this).next().fadeIn('slow', function(){ $(this).prev().fadeOut('slow'); }); }); }); $("#arrow-back").click(function() { $('ul.services li').fadeOut(function(){ $(this).prev().fadeIn('slow'); }); }); }); </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