jquery - .each は .hover 呼び出しに対して正しいクラス名を生成しますが、.css に対しては生成しません

Question

CSS オブジェクト (.thumbposition1 -> 20) の不透明度フェードを行う関数を作成しようとしています。背景画像に、(スクローラー上で) マウスオーバーされているグレースケールの対応するものと同じ CSS プロパティを動的に割り当てています。

これは、各クラスを名前で手動で指定する場合はうまく機能しますが、.each 呼び出しを導入して物事を最小限に抑えようとすると、悪いことが起こります: .hover は正常に動作し、マウスオーバーされている CSS クラスを返しますが、変更しようとすると (テスト) 上にある画像と下にある画像の CSS プロパティ。オフセット値は常に同じです (上:0px、左:200px)。

私は何を間違っていますか？愚かな間違い/恐ろしいコード/などを許してください。私は初心者です。

$(document).ready(function () {
$("img").each(function(i) {
    var i = i + 1;
    var iString = i.toString();
    var currentThumbPositionString_gs = ".thumbpositiongs" + iString;
    var currentThumbPositionString_c = ".thumbposition" + iString;
    var currentThumb_gs = $(currentThumbPositionString_gs);
    var currentThumb_c = $(currentThumbPositionString_c);
    var thumbPos = currentThumb_gs.offset();
    var thumbPos_c = currentThumb_c.offset();
    currentThumb_gs.hover(function() {  
            currentThumb_c.css({
                    left:thumbPos.left,
                    top:thumbPos.top,
                    height:"auto",
                    width:"auto",
                    "z-index":"-1000000",
                    visibility:"visible"});
            currentThumb_gs.stop().animate({"opacity": "0"}, "1500");
            },
            function() {
                    currentThumb_gs.stop().animate({"opacity": "1"}, "1500");
                    currentThumb_c.delay(355).queue( function() {
                    $(currentThumb_c).css({
                    height:"0",
                    width:"0",
                    visibility:"hidden"});
                currentThumb_c.clearQueue();
                });
            });
        });
    });