.mouseover problem

.mouseover problem

OK So I got 5 images, 3 are headers and layered using z-index(head, head-templates, head-projects) to be on-top of each other; the other 2 are just images for the mouseover(templates, projects). What I want to happen is when you hover over the image templates I want it to animate head to head-templates and when you put your mouse over projects it animates head to head-projects. When your mouse take your mouse off, so mouseout is used, I want it to animate back to head. The css for the images are as follows:
  1. .head{
  2. position: absolute;
  3. left: 0;
  4. top: 0;
  5. z-index: 10;
  6. }
  7. .head-templates{
  8. position: absolute;
  9. left: 0;
  10. top: 0;
  11. z-index:9;
  12. }
  13. .head-projects{
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. z-index:8;
  18. }
And the Jquery is
  1. $(document).ready(function(){
  2. $("img.templates").mouseover(
  3. function() {
  4. $("img.head").stop().animate({"opacity": "0"}, "slow");
  5. },
  6. function() {
  7. $("img.head-templates").stop().animate({"opacity": "1"}, "slow");
  8. });
  9. $("img.templates").mouseout(
  10. function() {
  11. $("img.head").stop().animate({"opacity": "1"}, "slow");
  12. },
  13. function() {
  14. $("img.head-templates").stop().animate({"opacity": "0"}, "slow");
  15. });
  16. $("img.projects").mouseover(
  17. function() {
  18. $("img.head").stop().animate({"opacity": "0"}, "slow");
  19. },
  20. function() {
  21. $("img.head-projects").stop().animate({"opacity": "1"}, "slow");
  22. });
  23. $("img.projects").mouseout(
  24. function() {
  25. $("img.head").stop().animate({"opacity": "1"}, "slow");
  26. },
  27. function() {
  28. $("img.head-projects").stop().animate({"opacity": "0"}, "slow");
  29. });
  30. });
But what happens when I mouseover projects instead of turning from head into head-projects into animates into head-templates... I've checked all the images and all are fine... Can someone please gimme a code fix and tell me what was wrong so I know for future reference!

Thanks,
Prentice