使用jquery fadeIn时的鼠标跟随问题

kuarbcqp 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(156)

我正试着让这个圆跟着光标走。然而，我需要光标淡入后，用户单击按钮，当这种情况发生时，虽然圆不会在光标的中心。
第一个代码片段显示了所需的结果，即圆正确地跟随光标并居中。第二个代码片段显示了按钮单击时所需的淡入效果，但正如您所看到的，圆不会以光标为中心
第一个代码段：

const cursor = document.querySelector('.test');
const {
  width,
  height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
  cursor.style.top = e.y - height / 2 + 'px';
  cursor.style.left = e.x - width / 2 + 'px';
});

.test {
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background-color: red;
    z-index: 200;
}

<div class="test"></div>

第二个代码段：

$("#myBtn").click(function(){
  $('.test').fadeIn();
}); 

const cursor = document.querySelector('.test');
const {
  width,
  height
} = cursor.getBoundingClientRect();
document.addEventListener('mousemove', e => {
  cursor.style.top = e.y - height / 2 + 'px';
  cursor.style.left = e.x - width / 2 + 'px';
});

.test {
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background-color: blue;
    z-index: 200;
    display: none;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button id="myBtn">show</button>

<div class="test"></div>

jquery

来源：https://stackoverflow.com/questions/66237968/mouse-following-issue-when-using-jquery-fadein

2条答案

按热度按时间

wmomyfyw1#

在第二个例子中，在页面init上，.test div有display: none，所以它的height和width是0。必须在fadeIn之后计算它们才能得到正确的结果。
您还可以在fadeIn之后添加mousemove侦听器：

$("#myBtn").click(function() {
  $('.test').fadeIn('slow', function() {
    const cursor = document.querySelector('.test')
    , { width, height } = cursor.getBoundingClientRect();
    
    document.addEventListener('mousemove', e => {
      cursor.style.top = e.y - height / 2 + 'px';
      cursor.style.left = e.x - width / 2 + 'px';
    });
  });
});

.test {
  position: absolute;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background-color: blue;
  z-index: 200;
  display: none;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button id="myBtn">show</button>

<div class="test"></div>

赞(0）回复(0）举报 2023-06-22

5hcedyr02#

另一种可能更简单的方法是在页面加载时调用.test div上的fadeOut()（持续时间为0），而不是使用display:none

$("#myBtn").click(function(){
  $('.test').fadeIn();
}); 

const cursor = document.querySelector('.test');
const {
  width,
  height
} = cursor.getBoundingClientRect();

$('.test').fadeOut(0);

document.addEventListener('mousemove', e => {
  cursor.style.top = e.y - height / 2 + 'px';
  cursor.style.left = e.x - width / 2 + 'px';
});

.test {
    position: absolute;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    background-color: blue;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button id="myBtn">show</button>

<div class="test"></div>

赞(0）回复(0）举报 2023-06-22

我来回答

使用jquery fadeIn时的鼠标跟随问题

2条答案

相关问题

热门标签

最新问答