悬停时的 JQuery 动画一次针对所有元素

Question

我有一个 js 文本动画，我计划在一个项目中多次使用它。动画在 Landing-Text 上的效果非常好，但随后在其他元素上运行：

• 必须在悬停时出现的气泡会同时出现在所有导航元素上。
• 回调函数不会在鼠标移出时停止动画。

Html

<nav class="top-nav">    
  <ul class="nav-list ">
     <li>
        <a href="#about" class="nav-link front">About Me</a>
     </li>
     <li>
        <a href="#services" class="nav-link front">Services</a>
     </li>
     <li>
        <a href="#dansArt" class="nav-link front">Artwork</a>
     </li>
     <li>
         <a href="#contact" class="nav-link front">Say Hello</a>
     </li>     
  </ul>
</nav>

JQuery:

        $('nav a[href*="#"]').on('mouseover', function(){
        
        let bArray = [],
        sArray = [6, 10, 15]; //sizes in px 

        for (let i = 0; i < $('.nav-link.front').width(); i++){
                bArray.push(i);}
            
        function randomValue(arr) {
            return arr[Math.floor(Math.random() * arr.length)];}
        
        setInterval(function(){
            let size = randomValue(sArray);// Get a random size 
            $('.nav-link.front').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px;width: ' + size + 'px; height:' + size + 'px;"></div>');
            $('.individual-bubble').animate({
                'bottom': '100%',
                'opacity' : '-=0.8'
            }, 3000, function(){
                $(this).remove() // Callback function used to remove finsihed bubbles from the page
            });
        }, 350, function(){
          $(this).remove(true)
        });
      })

这是codepen上的完整代码：https://codepen.io/justinegor/pen/KKzEaZG?editors=1010; 抱歉，我有时会在 vanila 和 jQuery 之间挣扎。谢谢你的建议。

Answer 1

气泡出现在所有导航元素上，因为它针对所有导航元素：

$('.nav-link.front').append

要解决这个问题，我们可以使用 this 仅定位悬停元素

$(this).append

因为外部setInterval 函数被创建为function()，this 的范围不再是顶级悬停元素。为了使其按预期工作并以悬停的导航元素为目标，我们可以将其写为arrow function：

setInterval(() => { ...

现在，要在不悬停时消除气泡，我们需要间隔停止。我们可以在 mouseleave 上调用clearInterval。

//Header Bubble animation
function headerBubbles() {
  let bArray = [],
    sArray = [6, 15, 20, 30]; //sizes in px 

  for (let i = 0; i < $('.landing-text').width(); i++) {
    bArray.push(i);
  }

  function randomValue(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }

  setInterval(function() {
    let size = randomValue(sArray); // Get a random size 
    $('.landing-text').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px;width: ' + size + 'px; height:' + size + 'px;"></div>');
    $('.individual-bubble').animate({
      'bottom': '100%',
      'opacity': '-=0.8'
    }, 3000, function() {
      $(this).remove()
    });
  }, 350);
}
headerBubbles();

let bubbles;
$('nav a[href*="#"]').on('mouseover', function() {

  let bArray = [],
    sArray = [6, 10, 15]; //sizes in px 

  for (let i = 0; i < $('.nav-link.front').width(); i++) {
    bArray.push(i);
  }

  function randomValue(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }

  bubbles = setInterval(() => {
    let size = randomValue(sArray); // Get a random size 
    $(this).append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px;width: ' + size + 'px; height:' + size + 'px;"></div>');
    $('.individual-bubble').animate({
      'bottom': '100%',
      'opacity': '-=0.8'
    }, 3000);
  }, 350);

});

$('nav a[href*="#"]').on('mouseleave', function() {
  clearInterval(bubbles);
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.nav-list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-link.front {
  width: 100%;
  border: 1px red solid;
}

a {
  text-decoration: none;
  color: #000;
}

.top-nav li {
  padding: 5rem 2rem 2rem 0;
  text-decoration: none;
  display: block;
  position: relative;
}

.center-inner {
  display: block;
  vertical-align: middle;
  text-align: center;
}

.landing-text {
  display: inline-block;
  font-family: arial;
  position: relative;
}

.landing-text h1 {
  position: relative;
  margin: 6rem 0 0;
  font-size: 8.5rem;
  font-family: 'Luckiest Guy', cursive;
  letter-spacing: 2px;
  color: rgba(114, 240, 230, 0.8);
  z-index: 2;
  animation: 1s ease-in-out moveInRight;
}

.landing-text h1:after {
  content: '';
  color: grey;
  font-size: 2.3rem;
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  animation: 1s ease-in-out moveInLeft;
}

.individual-bubble {
  position: absolute;
  border-radius: 100%;
  bottom: 45%;
  opacity: 0.8;
  z-index: 1;
  background-color: rgba(114, 240, 230, 0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-outer">
  <div class="center-inner">
    <div class="landing-text">
      <h1>Portfolio</h1>
    </div>
  </div>
</div>


<nav class="top-nav">

  <ul class="nav-list ">
    <li>
      <a href="#about" class="nav-link front">About Me</a>
    </li>
    <li>
      <a href="#services" class="nav-link front">Services</a>
    </li>
    <li>
      <a href="#dansArt" class="nav-link front">Artwork</a>
    </li>
    <li>
      <a href="#contact" class="nav-link front">Say Hello</a>
    </li>

  </ul>
</nav>

Answer 2

//Header Bubble animation
    function headerBubbles(){
         let bArray = [],
             sArray = [6, 15, 20, 30]; //sizes in px 

        for (let i = 0; i < $('.landing-text').width(); i++){
                bArray.push(i);}
            
        function randomValue(arr) {
            return arr[Math.floor(Math.random() * arr.length)];}
        
        setInterval(function(){
            let size = randomValue(sArray);// Get a random size 
            $('.landing-text').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px;width: ' + size + 'px; height:' + size + 'px;"></div>');
            $('.individual-bubble').animate({
                'bottom': '100%',
                'opacity' : '-=0.8'
            }, 3000, function(){
                $(this).remove() 
            }
            );
        }, 350);
    }
headerBubbles();   

//You can use jQuery .each() function to loop trough your links, then [...]
$('nav a[href*="#"]').each((index, element)=>{
  
  //[...] use the function second parameter to add an event listener [...]
  $(element).on("mouseover", function(){
    let bArray = [],
      sArray = [6, 10, 15]; //sizes in px 

        for (let i = 0; i < $('.nav-link.front').width(); i++){
                bArray.push(i);
        }
            
        function randomValue(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }
    
    setInterval(function(){
            let size = randomValue(sArray);// Get a random size 
            
            //[...] and the same parameter to append your bubbles to the disired element [...]
            $(element).append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px;width: ' + size + 'px; height:' + size + 'px;"></div>');
            $('.individual-bubble').animate({
                'bottom': '100%',
                'opacity' : '-=0.8'
            }, 3000, function(){
                $(this).remove() // Callback function used to remove finsihed bubbles from the page
            });
        }, 350, function(){
          $(this).remove(true)
        });
  })
  
  //[...] still inside your .each() loop add the on 'mouseout' event listener [...]
  $(element).on("mouseout", function(){
    //[...] remove your bubbles here.
  })
})

/*
let bubblyButtons = document.getElementsByClassName("nav-link front");
      for (var i = 0; i < bubblyButtons.length; i++) {
        bubblyButtons[i].addEventListener('mouseover', headerBubbles, false);
      }
bubblyButtons.removeEventListener('mouseout', headerBubbles, false);
        })
*/


    //Header Bubble animation/End

html, body {
width: 100%;
height: 100%;
margin: 0;
}






.nav-list {
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.nav-link.front {
  width: 100%;
  border: 1px red solid; 
}


a{
  text-decoration: none;
  color: #000;
 
}
.top-nav li {
  padding: 5rem 2rem 2rem 0;
  text-decoration: none;
  display: block;
  position: relative;
}

    
.center-inner {
    display: block;
    vertical-align: middle;
    text-align: center;
    }
    
.landing-text {
    display: inline-block;
    font-family: arial;
    position: relative;
    }
.landing-text h1 {
    position: relative;
    margin: 6rem 0 0;
    font-size: 8.5rem;
    font-family: 'Luckiest Guy', cursive;
    letter-spacing: 2px;
    color: rgba(114, 240,230, 0.8);
    z-index: 2;
    animation: 1s ease-in-out moveInRight;
    }
.landing-text h1:after{
      content: '';
      color: grey;
      font-size: 2.3rem;
      position: absolute;
      top: 100%;
      left: 0%;
      width: 100%;
      font-family: 'Montserrat', sans-serif;
      animation: 1s ease-in-out moveInLeft;
}
    
.individual-bubble {
    position: absolute;
    border-radius: 100%;
    bottom: 45%;
    opacity: 0.8;
    z-index: 1;
    background-color:  rgba(114, 240,230, 0.8);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-outer">
            <div class="center-inner">
                <div class="landing-text">
                    <h1>Portfolio</h1>
                </div>
            </div>
        </div>


<nav class="top-nav">
           
            <ul class="nav-list ">
                <li >
                    <a href="#about" class="nav-link front">About Me</a>
                </li>
                <li>
                    <a href="#services" class="nav-link front">Services</a>
                </li>
                <li>
                    <a href="#dansArt" class="nav-link front">Artwork</a>
                </li>
                <li>
                    <a href="#contact" class="nav-link front">Say Hello</a>
                </li>
            
            </ul>
        </nav>