Jquery fadeIn,fadeOut,delay(),]的问题>

问题描述 投票:0回答:1

这可能被问了一百万遍,但是我仍然无法使其工作:每当我使用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/[email protected]/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>

我做了一个小提琴

https://jsfiddle.net/Nick_Sch/yupxbq5r/5/(第一次使用小提琴。。]

这可能被问了一百万遍,但是我仍然无法使其工作:每当我使用Jquery时,由于某些原因,fadeIn(),fadeOut()和delay()函数均无法使用。我不是...

javascript jquery tooltip
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.