Использование offset(); координаты для запуска fadeOut();

Question

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

У меня есть модель солнечной системы, вращающейся вокруг в HTML и CSS. Я вымотал некоторые JS там, чтобы заставить планеты играть какую-то музыку и fadeOut() на hover()

Однако я хочу удалить hover() и сделать планету своей работой на основе их координат; каждый из них играет заметку, когда попадает в определенную координату.

Я попытался это:

$(document).ready(function() { 
    var x = $("#mercury").offset; 
if(x.top >= 1200.00 && x.left >=1000.00){ 
    $("#mercury").fadeOut("slow"); 

}; 

Но ничего не происходит.

Я уверен, что это проблема моего собственного невежества, я, вероятно, пишу это неправильно, но мне нужна помощь.

Вкратце, как мне инициировать событие, основанное на координатах offset()?

Answer 1

Для вызова функции вам нужно иметь круглые скобки после имени функции. Поэтому вам нужно изменить .offset на .offset(). Также у вас есть, если отсутствуют условия закрытия фигурной скобки. Поэтому старайтесь всегда отступать от своего кода, так что вы увидите открывающие и закрывающие скобки.

Попробуйте это.

$(document).ready(function() { 
    var x = $("#mercury").offset(); 
    if(x.top >= 1200.00 && x.left >= 1000.00){ 
     $("#mercury").fadeOut("slow"); 
    } 
}; 

Answer 2

У вас есть цикл анимации? (Функция, постоянно вызываемая для обновления вашего интерфейса).

Вы выполняете свой код в функции «готовность документа». Эта функция будет выполняться только «один раз», когда ваша страница закончит загрузку и никогда больше.

Для достижения того, что вы хотите, вам нужно будет постоянно выполнять свой код, чтобы он выполнял эту проверку для каждого кадра анимации (по мере того, как ваши анимации происходят).

Если у вас еще нет цикла запуска для ввода кода, вы можете установить интервал, чтобы он постоянно контролировал положение планет.

Пример

$(document).ready(function(){ 

    var myLoop = window.setInterval(function() { 

     var x = $("#mercury").offset(); 
     if(x.top >= 1200.00 && x.left >= 1000.00){ 
      $("#mercury").fadeOut("slow"); 
     } 

    }, 200); // Execute the above every 200 milliseconds 
}); 

Если вниз по дорожке вы хотите, чтобы остановить проверки/цикл просто выполнить:

window.clearTimeout(myLoop);