Jquery 淡入、淡出、延遲（）的問題，

Question

這可能被問了一百萬次，但我仍然無法使其工作：每當我使用 Jquery 時，fadeIn()、fadeOut() 和 delay() 函數由於某種原因不起作用。 我不是Jquery的專業人士，但我用過很多。

我想制作一個類似工具提示的 div，每當我在框上使用 hover 時，它會在一段時間后出現褪色效果。 我在身體底部實現了我的 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/ （第一次使用小提琴..）

Answer 1

我看到你有兩個版本的 jQuery，應該選擇一個。

您可能希望在 Mouse Over 上使用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/