Несколько селекторов, когда не вызывается JQUERY

Question

Я попробовал немного Jquery и только что получил ошибку, которую я действительно не могу понять.

Я пытаюсь слайд в изображениях, когда они отображаются на экране.
Это мой код: http://jsfiddle.net/4uxoesra/

$(document).ready(function () {

    var windowTopPos, windowBotPos;

    $.fn.revealOnScroll = function () {
        return this.each(function () {

            if (!$(this).hasClass("hidden")) {
                $(this).hide("slide", {
                    direction: "left"
                }, 1).addClass("hidden");
            }

            objectOffset = $(this).offset().top;

            if (windowBotPos > objectOffset && !$(this).hasClass("animation-complete")) {
                $(this).show("slide", {
                    direction: "left"
                }, 5000).addClass("animation-complete");
            }
        });

    }

    $(window).scroll(function () {

        windowTopPos = $(window).scrollTop();
        windowBotPos = ($(window).height() + windowTopPos);

        $('#status').html(windowBotPos);

        $('img').revealOnScroll();
    });

});

Проблема в том, что когда показывается один, все показываются одновременно.
Это не то, что говорит мой код, или это? Вы видите проблему?

Answer 1

Ваше смещение будет неправильным, если изображение скрыто.

Скорее двигай .hide() прямо перед тем, как показать элемент.

if (!$(this).hasClass("hidden")) {
       $(this).addClass("hidden");
}

objectOffset = $(this).offset().top;

if (windowBotPos > objectOffset && !$(this).hasClass("animation-complete")) {
       $(this).hide("slide", {
            direction: "left"
       }, 1, function(){
            $(this).show("slide", {
                    direction: "left"
                }, 5000).addClass("animation-complete");
            });
       }
});

Смотрите следующую скрипку: http://jsfiddle.net/xvb9nc8e/1