JQuery завис над не работает должным образом

0

То, что я хочу сделать, - это изображение, чтобы двигаться вправо, когда мышь нависает над ним и возвращается в ту же позицию, когда мышь снимается с изображения. Но это то, что изображение идет влево и исчезает, когда на него нависает мышь. Пожалуйста, скажите мне, что моя ошибка.

<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>
  • 0
    Код должен быть заключен в $(document).ready() . Он выполняется до загрузки элементов в DOM.
  • 0
    Извините, я новичок в этом. Как это сделать? Где я должен положить $ (документ) .ready ()
Теги:
jquery-animate
jquery-hover

2 ответа

4
Лучший ответ

jQuery animate() анимирует свойства CSS, поэтому вы, вероятно, должны придерживаться анимации одного и того же свойства, так как left и right есть два разных свойства CSS

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

Также обратите внимание, что в некоторых случаях вам нужно установить значение inital в CSS, поскольку jQuery не может вычислять значения по умолчанию, такие как inherit или auto, и что установка значений left и top не работает без позиции

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

FIDDLE

Поделиться
  • 0
    когда я изменил код на это, он вообще перестал двигать изображение. изображение теперь статично и не движется
  • 0
    @ user2942227 - Я не уверен, в чем проблема. Код в вопросе не должен работать вообще, и этот код прекрасно работает для меня, единственное, о чем я могу думать, это то, что у вас есть CSS или javascript где-то еще, что также влияет на изображение.
Показать ещё 2 комментария
1

Код необходимо обернуть в $ (document).ready(). Он выполняется до того, как элементы загружаются в DOM. $(document).ready(function(){}) сообщает jQuery ждать, пока DOM будет загружен перед выполнением вашего скрипта.

$(document).ready(function(){
   $('#box img').hover(
      function () {
        $(this).animate({
          right: '2px'
        });
      }, 
      function () {
        $(this).animate({
          left: '2px'
        });
      }
    );
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню