Databases
StackOverflow2013
Postsdbo
POWhy am I not incrementing/decrementing correctly?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy am I not incrementing/decrementing correctly?
    text
    copied!<p>I've been working on building a jquery cycle with custom animation and prev/next functionality. See <a href="https://stackoverflow.com/q/14075037/1905842">Old Question</a>. I haven't been able to figure out how to do this with cycle(). So I built this instead: <a href="http://jsfiddle.net/edubs/zmzzS/2/" rel="nofollow noreferrer">JSFiddle</a>. However, as written, each function (prevcycle and nextcycle) only works once as I'm not correctly incrementing/decrementing my variables. What I'm doing wrong?</p> <p>I'm new to all of this so all constructive criticism is welcome and appreciated.</p> <p>Here is my script:</p> <pre><code>$(document).ready(function() { var slideCount = $('div.slide').length, centSlide = 0, // enter 1 to test prevcycle prevSlide = centSlide - 1, nextSlide = centSlide + 1; // initialize $('.slide:eq('+centSlide+')').addClass('liveslide'); if (prevSlide &gt;= 0 &amp;&amp; prevSlide &lt; slideCount) { $('.slide:eq('+prevSlide+')').addClass('prev'); }; if (nextSlide &lt; slideCount) { $('.slide:eq('+nextSlide+')').addClass('next'); }; // next cycle code $('.slide:eq('+nextSlide+')').click(function() { nextcycle(centSlide, slideCount); }); // prev cycle code $('.slide:eq('+prevSlide+')').click(function() { prevcycle(centSlide, slideCount); }); // construct functions function nextcycle(x, y) { centSlide = x + 1; prevSlide = centSlide - 1; nextSlide = centSlide + 1; $('.slide:eq('+x+')').removeClass('prev'); $('.slide:eq('+centSlide+')').animate({ left: 0, height: '90%', top: 0 }, 1000).removeClass('next').addClass('liveslide'); if (prevSlide &gt;= 0 &amp;&amp; prevSlide &lt; y) { $('.slide:eq('+prevSlide+')').animate({ left: '-79%', height: '80%', top: '5%', }, 1000).removeClass('liveslide').addClass('prev'); }; if (nextSlide &lt; y) { $('.slide:eq('+nextSlide+')').css('left','100%').animate({ left: '79%' }, 1000).addClass('next') }; }; function prevcycle(x, y) { centSlide = x - 1; prevSlide = centSlide - 1; nextSlide = centSlide + 1; n = x + 1; $('.slide:eq('+n+')').removeClass('next'); $('.slide:eq('+centSlide+')').animate({ left: 0, height: '90%', top: 0 }, 1000).removeClass('prev').addClass('liveslide'); if (prevSlide &gt;= 0 &amp;&amp; prevSlide &lt; y) { $('.slide:eq('+prevSlide+')').css('left','-100%').animate({ left: '-79%' }, 1000).addClass('prev'); }; if (nextSlide &lt; y) { $('.slide:eq('+nextSlide+')').animate({ left: '79%', height: '80%', top: '5%', }, 1000).removeClass('liveslide').addClass('next'); }; }; }); // end ready​ </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