Код jQuery не работает, не понимая разметку

Я пытаюсь сделать простую анимацию с помощью jQuery. Я пробовал добавлять скрипт извне (внешний файл) и внутри (внутри тегов скрипта). Я проверил, распознает ли страница сценарий с помощью функции предупреждения, но сценарий не выполняется. Я думаю, это как-то связано с синтаксисом.

$("#container5").hover(function() {
        //hover in
        $(#container5).animate({
            height: "250",
            width: "250",
            left: "-=50",
            top: "-=50",
            }, "fast");
            }, function() {
            //hover out
            $(#container5).animate({
            height: "200",
            width: "200",
            left: "+=50",
            top: "+=50",
            }, "fast");
        }
    })(jQuery);

javascript animation jquery syntax markup
person Andrae Browne    schedule 14.12.2012    source источник
comment
Обе ваши внутренние функции должны использовать $("#container5") (в кавычках) ....   -  person Hellion    schedule 15.12.2012

Ответы (3)


arrow_upward
0
arrow_downward

Помимо того, что у вас нет готовых обработчиков, ваш синтаксис немного не работает:

1: ваш #container всегда должен быть в кавычках Ex: $ ('# container5') - ИЛИ вы можете просто использовать $ (this) для анимации наведения, потому что он находится в том же контейнере

2: У вас есть дополнительная запятая после вершины: «+ = 50» - уберите ее. Последняя строка анимации или чего-либо в {} не может иметь запятую в конце.

3: Поместите его в готовую функцию.

Вот обновленный код:

$(document).ready(function(){
    $("#container5").hover(
    function() {
        $(this).animate({height: "250", width: "250", left: "-=50", top: "-=50"}, "fast");
    }, 
    function() {
        $('#container5').animate({height: "200", width: "200", left: "+=50", top: "+=50"}, "fast");
    });
});

ВНИМАНИЕ: я использовал $ (this) и $ ('# container5'). В данном случае вы можете использовать их как взаимозаменяемые. Прочтите $ (this), если вы хотите узнать больше о динамических событиях.

person ntgCleaner    schedule 14.12.2012

arrow_upward
0
arrow_downward

Вам нужно обернуть свой код в готовый обработчик, плюс вам также нужно заключить свои строки в кавычки.

У вас также, похоже, нарушена настройка функции, как заявил Хеллион, вам не следует передавать jQuery в функцию в момент, когда вы это делаете. Вместо этого вам нужно обернуть весь свой код анонимной функцией с $ в качестве параметра и передать в нее jQuery. Это сделано для защиты от других библиотек, которые могут использовать глобальную $ var.

Три вещи, которые помогут вам обнаружить эти проблемы в будущем.

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

Следующее должно исправить ваши проблемы:

;(function($){
  $(function(){
    $('#container5').hover(
      function(){
        $('#container5').animate({
          height: "250",
          width: "250",
          left: "-=50",
          top: "-=50",
        },"fast");
      },
      function() {
        $('#container5').animate({
          height: "200",
          width: "200",
          left: "+=50",
          top: "+=50",
        },"fast");
      }
    );
  });
})(jQuery);
person Pebbl    schedule 14.12.2012

arrow_upward
0
arrow_downward

Вам нужно обернуть свой код готовой функцией. Проблема в том, что ваш jQuery запущен до того, как DOM будет готов. Это сработает.

jQuery(document).ready(function($){
    $('#container5').animate({
       height: "250",
       width: "250",
       left: "-=50",
       top: "-=50"
    }, "fast");
});
person Drew Baker    schedule 14.12.2012