На странице jq-событие mousemove, которые при движении курсора изменяет положение элементов на экране - элементы приближаются на расстояние равное части расстояния до курсора. Позиция элементов абсолютна, изменятся только margin. На эти элементы весит MutationObserver, который должен возвращать margin при изменении, но возвращает не то значение margin, которое установлено по факту. Кусок кода:
linesTo.forEach((item) => {
updateByMutation($('.dot').eq(item).get(0), item);
})
container.find('#mouse').mousemove((e) => {
container.find('.dot').each(function() {
var posY = parseInt($(this).css('top')),
posX = parseInt($(this).css('left')),
l = Math.pow((Math.pow(posY - e.pageY, 2) + Math.pow(posX - e.pageX, 2)), 1 / 5) * 2,
direction, offsetY, offsetX;
direction = Math.atan2(posY - e.pageY, posX - e.pageX)
offsetY = -Math.cos(direction) * l;
offsetX = -Math.sin(direction) * l;
$(this).css({
'margin-top': offsetX + 'px',
'margin-left': offsetY + 'px'
});
})
})
function updateByMutation(target, id) {
const config = {
attributes: true
}, callback = function() {
$('.dot .line').each(function() {
console.log(parseFloat($(target).css('left')), parseFloat($(target).css('margin-left').replace('px', '')));
if ($(this).data('lineTo') == id)
$(this).css(drawLine({
x: $(this).parent().offset().left,
y: $(this).parent().offset().top
}, {
x: parseFloat($(target).css('left')) + parseFloat($(target).css('margin-left').replace('px', '')),
y: parseFloat($(target).css('top')) + parseFloat($(target).css('margin-top').replace('px', ''))
}))
})
}, observer = new MutationObserver(callback);
observer.observe(target, config);
}
Проблема вероятно заключается в вызове mousemove, но как это её можно исправить?
