Your code seems a bit messy, but I believe your statement is functioning, even if just momentarily.
It appears that the issue arises when setting the position of the <img> elements returned by find("img") to those of your elements with the ID "imageContainerN". This might be due to setting the position while an animation is in progress, causing the element to jump to -320px and remain there until the next animation takes place shortly after.
You could try restructuring the code like this (with the crucial change being the order in which the animation and test occur)...
$("#right").click(function() {
$("#sliderWindow").find("img").each(function() {
if (this.offsetLeft >= 1220) {
$(this).css("left", "-320px");
}
$(this).animate({left: "+=220px"}, "slow");
});
});
Explanation
Consider the process of setting up an animation in jQuery.
1) jQuery notes the requested movement of +220px from the current position
2) For instance, if the image is currently at 100px, jQuery plans to move it from 100px to 320px over a specified duration
3) Once the animation starts, jQuery disregards the image's current position and simply calculates where it should be based on the animation parameters for each tween
During the animation, if you then attempt to reposition the element with an if statement, the following scenario may unfold over time...
1) Animation calculated based on parameters (starting at 100px, ending at 320px)
2) After 10 milliseconds, the image moves to 102.2px
3) Your code runs (assuming it evaluates true for the current position of 102.2px)
4) The image is repositioned to -320px by your code
5) The next tween occurs after 10ms and moves the image to 104.4px (making it appear as though the image was never moved to -320px)
6) Subsequent tweens continue moving the image to 106.6px, 108.8px, and so on, until it reaches 320px
I hope this clarifies the situation. While I have not delved into the jQuery animation code, this is likely the process at play.