There is simple html like this:
-
<ul id="icons">
<li class="icon1 hoverNow"><img src="some/pic1.jpg"/></li>
<li class="icon2"><img src="some/pic2.jpg"/></li>
<li class="icon3"><img src="some/pic3.jpg"/></li>
<li class="icon4"><img src="some/pic4.jpg"/></li>
</ul>
where class 'hoverNow' means, that opacity of the image is 1.0, while others 0.5. This done with css.
i want to do, that when mouse hover the 'li' element, image, IF it's not in the li element, who's having class 'hoverNow', become with opacity 1.0, and on mouseover, again will have 0.5 opacity. For this, i write this simple code:
- $('ul#icons li:not(.hoverNow)').hover(function(){
$('img',this).stop().animate({opacity: 1.0}, 150);
}, function(){
$('img',this).stop().animate({opacity: 0.5}, 300);
});
but this works in the very strange way. For now if i hover 'li' element with mouse, he will have 1.0 opacity, and if i hover the 'li.hoverNow', nothing happens, like i want. Everything is alright, but this is slideshow gallery, and it when the img is changing, jquery removes class from 'li' element and add this for another one. I know this, becouse when this one happens, first 'li' element who had 'hoverNow' class, become a transparency, without this class, and another element get class and his opacity becomes 1.0. But when i hover the previous 'li.hoverNow' element, who have this class, by original write html, and now is without 'hoverNow' class and have 0.5 opacity, nothing happens, he doesn't get opacity 1.0, while other 'li' element, who by original hmtl didn't have the hoverNow class, but now have, feels when i hover him, because when i mouseOut from him, he becomes transparency.
So this is my problem, hope you'll understand everything correctly.