Question

i have this simple code http://jsfiddle.net/U4Fj9/
the index of the visible image is always 3 which is the last image while the visible image is the first one
i know it’s very simple but can’t see anything wrong with my code any help ?

Answer 1

See http://api.jquery.com/visible-selector/

Elements with visibility: hidden or opacity: 0 are considered to be
visible, since they still consume space in the layout. During
animations that hide an element, the element is considered to be
visible until the end of the animation. During animations to show an
element, the element is considered to be visible at the start at the
animation.

This method e.g. as replacment of your original one solves your problem:

$(document).ready(function() {
   $(".show img").css("display","none");
   $(".show img:first").css("display","inline");
   var curImg = $(".show img").filter(":visible").index();
   $(".curindex").html(curImg );
});