Question

Essentially I have one visible element at all times and I’m using arrow keys to change the visibility to sibling elements.

Arrow left = Shows previous element to the visible one and then hides next element.

Arrow right = Shows next element to the visible one and then hides previous element.

The problem is basically: Quickly pressing the arrow keys.

In my jsfiddle the current visible one is 4 and if I quickly press Arrow right and Arrow left I end up with number 3 where as if you do it slowly ( waiting that all the animations finish up ) you end up with number 4 just like you should.

http://jsfiddle.net/lollero/je2fZ/

What I want is to be able to press the arrow keys as quickly as humanly possible and end up showing the right number.

..and it’s weird if you first press left and then right multiple times you end up showing all of the numbers… that isnt desired as well.

Answer 1

Use something other than :visible to mark the current element, as :visible will match for elements which are hiding but aren’t yet hidden. Demo using a class here.