jQuery hover over not working properly

StackOverflow https://stackoverflow.com/questions/21223947

Question

What I want to do is image to move right when mouse hovers over it and come back to the same position when mouse is taken off the image. But what this is doing is the image goes to the left and disappears when mouse hovers over it. Please tell me what my mistake is.

<html>
  <head>
    <style>
      img { position: relative; 
      }
    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type = "text/javascript"></script>
    <script type = "text/javascript">
    $('#box img').hover(
      function () {
        $(this).animate({
          right: '2px'
        });
      }, 
      function () {
        $(this).animate({
          left: '2px'
        });
      }
    );
    </script>
  </head>

  <body>
    <div id = "box">
      <img src="pathtimage/1.jpg" hspace="30"  height="350" width="220" >
    </div>
  </body>
</html>
Était-ce utile?

La solution

jQuery's animate() animates CSS properties, so you should probably stick with animating the same property, as left and right are two different CSS properties

$(function() {
    $('#box img').hover(function () {
        $(this).animate({
            left: '2px'
        }, 600);
    }, function () {
        $(this).animate({
            left: '0px'
        }, 600);
    });
});

Also note that in some cases you have to set an inital value in CSS, as jQuery can't compute default values like inherit or auto, and that setting left and top values doesn't work without a position

#box img {position: relative; left: 0}

FIDDLE

Autres conseils

The code needs to be wrapped in $(document).ready(). It is executing before the elements are loaded on the DOM. $(document).ready(function(){}) tells jQuery to wait until the DOM is loaded before executing your script.

$(document).ready(function(){
   $('#box img').hover(
      function () {
        $(this).animate({
          right: '2px'
        });
      }, 
      function () {
        $(this).animate({
          left: '2px'
        });
      }
    );
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top