Jquery fadeIn、fadeOut、delay() 的问题，

Question

这可能被问了一百万次，但我仍然无法让它工作：每当我使用 Jquery 时，fadeIn()、fadeOut() 和 delay() 函数对一些原因。我不是Jquery的专业人士，但我用过很多。

我想制作一个类似工具提示的 div，每当我将鼠标悬停在框上时，它会在一段时间后出现并带有淡入淡出的效果。我在正文底部实现了我的 JS/Juery（这应该可以工作），但我也在使用 Twitter Bootstrap css 和它的入门模板。

var rellax = new Rellax('.rellax')
var mouseX;
var mouseY;

$(document).mousemove(function(e) {
  // mouse coordinates
  mouseX = e.pageX;
  mouseY = e.pageY;
});

$('.me').mouseover(function() {
  $(this).mousemove(function() {
    // show tooltip
    $('.pointer').hide().delay(2000).fadeIn('slow');
    $('.pointer').css({
      left: mouseX,
      top: mouseY
    });
  });
}).mouseout(function() {
  // hide tooltip
  $('.pointer').fadeOut('slow');
});

$(function() {
  $('.me').click(function() {
    console.log('Click..');
    window.location = "#about_me";
  });
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.hero-image,
.front,
.name,
.portfolio,
.click_me {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("hero.jpg") no-repeat 50% 0;
  background-size: cover;
}

.front {
  background: url("front_png8.png") no-repeat 50% 0;
  background-size: cover;
}

.me {
  width: 285px;
  height: 790px;
  position: absolute;
  top: 16%;
  left: 65%;
  border: 1px solid green;
}

.me:hover {
  cursor: pointer;
}

.name {
  background: url("name.png") no-repeat 50% 50%;
  background-size: cover;
  opacity: 70%;
  top: 18%;
}

.click_me {
  background: url("click_me.png") no-repeat 50% 50%;
  background-size: cover;
  top: 10%
}

.portfolio {
  background: url("portfolio.png") no-repeat 50% 50%;
  background-size: cover;
  opacity: 70%;
  top: 14%;
}

.whitespace {
  width: 100%;
  height: 100vh;
}

.content {
  width: 80%;
  margin: 0 auto;
  padding: 80px 0;
  font-family: Helvetica;
}

.pointer {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  transition: 10ms;
}

<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
  <div id="about_me">
    <h2></h2>
    <p>
      16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and designing
      skills. My dream is to become a game developer and I would like to start my own company.

    </p>
  </div>
  <div>
    <h1></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
      dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
      libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
      placeat?</p>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

我做了一个fiddle：https://jsfiddle.net/Nick_Sch/yupxbq5r/5/（第一次使用fiddle..）

Answer 1

我看到你有两个版本的 jQuery，应该选择一个。

您可能想在鼠标悬停上使用 event 属性。我喜欢用 .hover() 代替。

考虑以下因素。

$(function() {
  var rellax = new Rellax('.rellax');
  $('.me').click(function() {
    console.log('Click..');
    window.location = "#about_me";
  }).hover(function(e) {
      // show tooltip
      $(".pointer").fadeOut(1, function() {
        setTimeout(function() {
          $(".pointer").css({
            left: e.pageX + "px",
            top: e.pageY + "px"
          }).fadeIn("slow");
        }, 2000);
      });
    },
    function(e) {
      // hide tooltip
      $('.pointer').fadeOut('slow');
    });
});

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.hero-image,
.front,
.name,
.portfolio,
.click_me {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("hero.jpg") no-repeat 50% 0;
  background-size: cover;
}

.front {
  background: url("front_png8.png") no-repeat 50% 0;
  background-size: cover;
}

.me {
  width: 285px;
  height: 790px;
  position: absolute;
  top: 16%;
  left: 65%;
  border: 1px solid green;
}

.me:hover {
  cursor: pointer;
}

.name {
  background: url("name.png") no-repeat 50% 50%;
  background-size: cover;
  opacity: 70%;
  top: 18%;
}

.click_me {
  background: url("click_me.png") no-repeat 50% 50%;
  background-size: cover;
  top: 10%
}

.portfolio {
  background: url("portfolio.png") no-repeat 50% 50%;
  background-size: cover;
  opacity: 70%;
  top: 14%;
}

.whitespace {
  width: 100%;
  height: 100vh;
}

.content {
  width: 80%;
  margin: 0 auto;
  padding: 80px 0;
  font-family: Helvetica;
}

.pointer {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  transition: 10ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
  <div id="about_me">
    <h2></h2>
    <p>16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and
      designing skills. My dream is to become a game developer and I would like to start my own company.</p>
  </div>
  <div>
    <h1></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
      dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
      libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
      placeat?
    </p>
  </div>
</div>

查看更多：https://api.jquery.com/hover/

Jquery fadeIn、fadeOut、delay() 的问题，

Problems with Jquery fadeIn, fadeOut, delay(),

javascript

jquery

tooltip