Это, вероятно, спрашивают миллион раз, но я все еще не могу заставить его работать: всякий раз, когда я использую 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>
Я сделал скрипку : https://jsfiddle.net/Nick_Sch/yupxbq5r/5/ (впервые с использованием скрипки .. )