слайдер с непрозрачностью и z-index не работает должным образом

Question

Я совершенно новый для JQuery. Я работаю над слайдером, который показывает изображение при нажатии большого пальца. Теперь я дал некоторые роли данных для больших пальцев и полного изображения, чтобы при нажатии пальца № 3 полное изображение идентификатора 3 данных было установлено на непрозрачность 1 и индекс z больше. Каким-то образом слайдер работает в первый раз, когда нажимаются большие пальцы, но когда я нажимаю второй раз, изображение не отображается, у него такое же, как у большого пальца. вот мой код

HTML

<div id="sliderContainer"> 
    <!--Filters --> 
    <ul id="filterList"> 
     <li>All</li> 
     <li>Objects</li> 
     <li>Fashion</li> 
     <li>Nature</li> 
    </ul> 

    <span id="titleText">asdsd</span> 
    <!--Thumbs List--> 
    <ul id="thumbsList"> 
     <li class="thumbs" data-thumbid="1" data-title="Girl Eating Something"><img src="images/fashion/fashion1Thumb.jpg" /></li> 
     <li class="thumbs" data-thumbid="2" data-title="Beautiful Face"><img src="images/fashion/fashion2Thumb.jpg" /></li> 
     <li class="thumbs" data-thumbid="3" data-title="Cinderella"><img src="images/fashion/fashion3Thumb.jpg" /></li> 
     <li class="thumbs" data-thumbid="4" data-title="Apple Mobile"><img src="images/objects/object1Thumb.jpg" /></li> 
     <li class="thumbs" data-thumbid="5" data-title="Coke Can"><img src="images/objects/object2Thumb.jpg" /></li> 
     <li class="thumbs" data-thumbid="6" data-title="Mountains"><img src="images/nature/nature1thumb.jpg" /></li> 
    </ul> 


    <img class="productsSliderImage" data-fullimageid="1" src="images/fashion/fashion1Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="2" src="images/fashion/fashion2Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="3" src="images/fashion/fashion3Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="4" src="images/objects/object1Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="5" src="images/objects/object2Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="6" src="images/nature/nature1Full.jpg" /> 
    <img class="productsSliderImage" data-fullimageid="7" src="images/nature/nature1Full.jpg" /> 

</div> 

и вот мой Jquery

$(document).ready(function() { 
    $(".productsSliderImage").css('opacity', '0'); 
}); 

$(document).ready(function() { 
    $('.thumbs').click(function() { 
     var currentThumbId = $(this).attr("data-thumbid"); //grab thumbId of clicked thumb. 
     //Changing css of the fullscreenImage which is equal to clcked thumb. 
     //Animation is done using Opacity in css. 
     $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('z-index', '33'); 
     $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('opacity', '1'); 
     var notClicked = $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').not(this); 
     notClicked.css('opacity', '1'); 
     notClicked.css('z-index', '1'); 
    }); 
}); 

И мой Css

.productsSliderImage { 
    position: absolute; 
    z-index: 1; 

    -webkit-transition: all 0.8s ease; 
    -moz-transition: all 0.8s ease; 
    -ms-transition: all 0.8s ease; 
    -o-transition: all 0.8s ease; 
    transition: all 0.8s ease; 
} 

Answer 1

Так В принципе вы можете сделать что-то вроде этого .animation

{ бла-бла-бла } тогда я JQuery, вы можете использовать что-то вроде этого OnClick()

$('#abc').addClass('animation'); 

и тот же вы можете удалить класс. спасибо

Answer 2

Попробуй, как,

CSS

.animate{ 
    zIndex:33; 
    opacity:1 
} 

SCRIPT

$('.thumbs').click(function() { 
    var thumbId = $(this).data("thumbid"); //use data function  
    // remove class for all products 
    $('.productsSliderImage').removeClass('animate'); 
    // set current product image class to overlap 
    $('.productsSliderImage[data-fullImageId="'+thumbId+'"]').addClass('animate'); 
}); 

Answer 3

вы всегда можете создать класс со свойствами вы хотите добавить такие как индекс г и непрозрачности, а не писать длинный код. вы можете использовать методы addClass() и removeClass() для этого. Прочитать здесь addClass() Method Info.

Спасибо.