0

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

$('#zx').click(function(e) {
  var offset = $(this).offset();
  var x = (e.pageX - offset.left);
  var y = (e.pageY - offset.top);
 
  if ($('#qwe').is(':visible')) {
    $('#qwe').fadeOut(200, function() {
        $(this).offset({top:y, left:x}).fadeIn(300)
    })
  } else {
    $('#qwe').offset({top:y, left:x}).fadeIn(300)
  }
});
#qwe {
  height: 50px;
  width: 50px;
  background: #999;
  display: none;
}
#zx {
  display: block;
  width: 600px;
  height: 300px;
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zx">
  <div id="qwe"></div>
</div>



  

1 ответ 1

1

Видимо какой-то баг jQuery. Получилось побороть, если сбрасывать сначала координаты кубика:

$('#zx').click(function(e) {
  var offset = $(this).offset();
  var x = (e.pageX - offset.left);
  var y = (e.pageY - offset.top);
 
  if ($('#qwe').is(':visible')) {
    $('#qwe').fadeOut(200, function() {
        $(this).css({left:0,top:0}).offset({top:y, left:x}).fadeIn(300)
    })
  } else {
    $('#qwe').offset({top:y, left:x}).fadeIn(300)
  }
});
#qwe {
  height: 50px;
  width: 50px;
  background: #999;
  display: none;
}
#zx {
  display: block;
  width: 600px;
  height: 300px;
  background: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zx">
  <div id="qwe"></div>
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.