Question

Im trying to get my images to animate on mouse over (hover) but for some reason its not working at all.

 $(document).ready(function(){
            $(function() {
            $('img.caption').hover(function(){
                $(this).find('img').animate({top:'182px'},{queue:false,duration:500});
            }, function(){
                $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
            });
        });
 });

and the adjoining html

<div class="imagediv"><img class="caption" src="images/gallery/placeholder.jpg" alt="This is test" title="" /></div>

I have another hover even linked back to the caption class, could it be a conflict. When i Mouseover the image nothing happens :/

Would this interfere with the other code?

 $(document).ready(function(){
        $(".caption").hover(
                function () {
                  $("#gallerydescription").html( $(this).attr("alt"));

  }, 
  function () {
    $("#gallerydescription").html("");
  }
);
 });

Answer 1

Example Here

As I stated in comments:

1. The following are equivalent, pick and choose:

   $(document).ready(function(){

   $(function() {

2. you can remove the find function, as you’ve already started with the img
3. you can remove the px from the assignment
4. you need to give your img a position (absolute/relative)

---

Example:

$(document).ready(function(){
   $('img.caption').hover(
      function(){ $(this).animate({top:'182'},{queue:false,duration:500}); },
      function(){ $(this).animate({top:'0'},{queue:false,duration:500});   }
   );
});