javascript - css3 を使用してフル スクリーン スライダーの z-index を設定できない

Question

cssと を使用して全画面スライダーを作成しようとしていますjquery。したがって、基本的な考え方は、css3アニメーションを使用してクラスを追加および削除することです。スライダーは一見すると問題なく動作し、親指 (画面の下部) をクリックするとスライダーの画像が美しく変化しますが、別の親指をクリックするとすべてがフェードアウトします。必要なのは、親指のフェードインに応じた画像です。皆さんが理解できるように、完全なコメントを含むフィドルを作成しました。私はこれに一生懸命取り組んでいますが、私が間違っている問題を理解できません。

$(document).ready(function () {
    $('#thumbsList>li').click(function () {

        //Getting Id from thumbnail or Full Image Refeence.

    var clickedFullImageId = $(this).data("fullimageid");

    //Save an BG image element which as actually clicked.
    var selectedBigImage = $('.backgroundImages[data-fullImageId="' + clickedFullImageId + '"]');



    //Z index should be placed here somewhere.


    //Removing Animation class of the Images which were not clicked.
    $('.backgroundImages').not(selectedBigImage).addClass('fadeOut', function () {
      $('.backgroundImages').removeClass('animationStuff');

        selectedBigImage.addClass('fadeIn');


    });


    // Displaying the Bg Img which was clicked by Thumb
    selectedBigImage.show();


    selectedBigImage.addClass('animationStuff');

});});

完全なコードはここにあります。 http://jsfiddle.net/thL7X/

これの処理方法を教えてください。ありがとう。