I'm building a gallery and i have a couple of thumbnails.

There is always 1 active thumbnail (opacity 100%) of the showing image and several inactive thumbnails (opacity 50%).

I've build some functions to catch clicks for those functions:

2.     $(document).ready(function() {
4. $(".galleryinactivethumb").click(function(){
5. $(".galleryactivethumb").removeClass('galleryactivethumb').addClass('galleryinactivethumb');
7. $(this).removeClass('galleryinactivethumb').addClass('galleryactivethumb');
9. alert("inactive thumb clicked!");
10. return;
11. });
13. $(".galleryactivethumb").click(function(){
15. alert("active thumb clicked!");
16. return;
17. });
19. jQuery('.galleryinactivethumb').each(function() {
21.             $(this).hover(function() {
22. //Hover out
23.                 $(this).stop().animate({ opacity: 1.0 }, 500)
24.             },
26.            function() {
27.   //Hover on
28.   $(this).stop().animate({ opacity: 0.5 }, 500);
29.                ;
30.            });
31.   
32.         });

When i click an inactive thumb the classes are changes to the correct classes (safari/chrome's webinspector shows the change in the classes) but when i then click the same thumb again it run's the function of the previous class(witch was removed jus a second ago).

Am i doing something wrong here?

I can't get it to work!

Can someone help me with this?

Thanks!