on change of left value change the opticity of inner element
I have slider which is moving with left value. i want to down the opacity of all other image instead of font image because other images can be seen on the side of front image.
Here is the html
- <ul style="width: 4680px; height: 450px; left: -1170px;" class="imageList">
<li height="450px" width="1170px" class="image">
<img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
</li>
<li height="450px" width="1170px" class="image">
<img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
</li>
<li height="450px" width="1170px" class="image">
<img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/52Ra33zPxhL.jpg">
</li>
<li height="450px" width="1170px" class="image">
<img width="1170px" height="450px" title="" alt="" src="http://ecx.images-amazon.com/images/I/72A6jEgsGLL.png">
</li>
</ul>
in the above html second image is in front because left value is "-1170px" and in the slider 3rd image come on the front when left value move left "-2340px".
I tried the following code for when left move to -1170px but i cannot get any response.
- jQuery(document).ready(function(){
- var left = jQuery("ul.imageList").css('left');
if(left == " -1170px"){
jQuery("ul.imageList li.image img:nth-child(2)").css("opacity", "1 !important");
}
- });
please tell me the fault in my code or suggest me how can I solve it. thanks in advance