CODEWITHSUNDEEP
jqueryimagejquery-animate
Dylan Benton
Dylan Benton

Reputation: 109

Jquery - Why wont my image animate on mouseover?

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("");
  }
);
 });

Upvotes: 0

Views: 748

Answers (3)

vol7ron
vol7ron

Reputation: 42109

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});   }
   );
});

Upvotes: 0

Bj&#246;rn
Bj&#246;rn

Reputation: 2648

  1. $(document).ready(function(){ is the same as $(function() {, basically you're doing the same thing twice, lose one of them.

  2. $('img.caption') already selects the image, while $(this).find('img') will start looking for images inside that image. Nothing will be found.

  3. the CSS position needs to either be relative or absolute for your animate to work:

    img { position: relative; }

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

EDIT:

The second .hover() shouldn't interfere, as it doesn't seem to do anything with the image itself.

See this fiddle for verification: http://jsfiddle.net/4c6Kx/6/

Your best bet would be to start commenting different blocks of code until you find the culprit.

Upvotes: 2

kei
kei

Reputation: 20491

jquery:

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

Then give your image position:relative

Upvotes: 0

Related Questions