Guys, hello everyone. There is such a code.

Html

<div class="menu"> <div><a href="#"><img src="img/menu_1_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_2_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_3_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_4_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_5_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_6_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_7_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_8_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_9_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_10_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_11_un.jpg"/></a></div> <div><a href="#"><img src="img/menu_12_un.jpg"/></a></div> </div>

Jquery

 $(function(){ $('.menu div a').hover(function(){ $(this).animate({ $(this).find('img').attr('src','img/menu_1.jpg') }, 300); }, function(){ $(this).animate({ $(this).find('img').attr('src','img/menu_1_un.jpg') }, 300); }); });

I want it to smoothly change to another when I see a picture (from black and white to color). But something does not fry the script. Rebzy, tell me what and how?

  • There is a function, there is no call, add a call to the last closing brackets: })(); - MasterAlex
  • not understood? where is wrong? - duddeniska
  • @duddeniska, instead of the last }); you need to put what I wrote, but in general, in order not to lose calls, use $(document).ready(function() { }); - MasterAlex
  • @MasterAlex unfortunately does not work - duddeniska
  • @duddeniska, in general, the point is that it is impossible to transmit such things in animate, there you can only change css parameters, not element parameters, try changing the image just by hover, and you can also adjust the animation in css, by the way, the image by hover, you can also css change :) - MasterAlex

1 answer 1

You do not have a valid javascript object passed to the animate function, {left: 10} - for example, a valid object. And what do you want in the end? Smooth change of the picture. Then you need to do something different: Show two pictures above each other and smoothly change the transparency of the top ...

 $(function(){ $('.menu div a').mouseenter(function(){ $(this).find('img:first').animate({opacity:0}, 300); }).mouseout(function(){ $(this).find('img:first').animate({opacity:1}, 300); }); })();

And ideally, you need to implement it through styles, the script is not worth doing.