javascript - 重置除当前悬停元素之外的所有其他 jQuery 动画

Question

所以我的代码有问题。它工作正常。但我有 3 个盒子并排放置。在悬停时，他们会做一些事情......即改变宽度。我遇到的问题。是，如果您将鼠标移到所有这些上，它们都会启动。但我只想要你把鼠标停在上面的那个。

因此，当我将鼠标悬停在这些框中的任何一个上时，我需要重置所有其他动画，以阻止多个框一次被激活。谢谢!

j查询

 function animatedText() {
  var $animatedTextBox = $('.animated-text');
  var $animatedAnimation = $('.animated-text-animation');

  $('.animated-text-content').css('display', 'none');
  $animatedTextBox.on('mouseenter', function() {
    $(this).find('.animated-text-animation').css('justify-content', 'flex-start');
    $(this).find($('.animated-text-content')).delay(600).fadeIn(800);
  });


  $animatedTextBox.on('mouseleave', function() {
    $(this).find('.animated-text-animation').css('justify-content', 'center');
    $(this).find($('.animated-text-content')).fadeOut(250);
  });
}

CSS

.animated-text {
  min-width: 33.333%;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  transition: all 0.7s ease-in-out;
}

.animated-text-animation {
    min-width: 50%;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 1s ease-in-out;
}

.animated-text:hover .animated-text-animation {
  flex: 1 1 40%;
}

.animated-text:hover {
    min-width: 50%;
}

.animated-text-container:hover .animated-text:not(:hover) {
  min-width: 25%;
}

html

  <div class="animated-text-container">
    <div class="animated-text animated-text-1">
      <div class="animated-text-animation">
        <div class="animated-text-logo animated-text-logo-1"></div>
        <div class="animated-text-content">
          <h1>We will do all of the following for free for the first 30 days to prove our ability, our worth, and our character to you:</h1>
          <li><span>Free Positioning Evaluation (Analyzing What you need to succeed)</span></li>
          <li><span>Free Website Evaluation</span></li>
          <li><span>Free Landing Page Evaluation</span></li>
          <li><span>Free (entire) account set-up for a PPC Campaign on AdWords or Bing</span></li>
          <li><span>Free Keyword List Building and Deployment</span></li>
          <li><span>Free Ad Campaign Design and Implementation</span></li>
          <li><span>Free Google Analytics Analysis and Evaluation</span></li>
          <li><span>Free Phone Consultations to Discuss Your Account</span></li>
        </div>
      </div>
    </div>

    <div class="animated-text animated-text-2">
      <div class="animated-text-animation">

        <div class="animated-text-logo animated-text-logo-2"></div>
        <div class="animated-text-content">
          <h1>What we do NOT do for free:</h1>
          <div class="li-container">
            <div class="li-content">
              <li><span>Website Development</span></li>
              <li><span>Landing Page Redesign</span></li>
              <li><span>Local Listing Management</span></li>
              <li><span>Online Reputation Management</span></li>
              <li><span>Audience Remarketing Campaigns</span></li>
            </div>
            <div class="li-content">
              <li><span>Live Chat Services</span></li>
              <li><span>Instant Email Alerts</span></li>
              <li><span>Call Recording & Tracking</span></li>
              <li><span>Website SEO Optimization</span></li>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="animated-text animated-text-3">
      <div class="animated-text-animation">

        <div class="animated-text-logo animated-text-logo-3"></div>
        <div class="animated-text-content">
          <h1>It is our earnest goal to:</h1>
          <div class="li-structure">
            <li></li><span>Analyze the current position of your company in the market</span>
          </div>
          <div class="li-structure">
            <li></li><span>Determine what tools and online campaigns you need to increase your sales and customer base</span>
          </div>
          <div class="li-structure">
            <li></li><span>Formulate an effective plan to increase the growth of your company through increased customers</span>
          </div>
          <div class="li-structure">
            <li></li><span>Effectively implement a cost effective advertising campaign to get the most out of every dollar spent</span>
          </div>
          <div class="li-structure">
            <li></li><span>Build an ongoing and long lasting friendship based on mutual trust, respect, and performance</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

您可以使用 stopPropagation 方法，这样现在不止是您停止鼠标的那个被触发。根据需要调整延迟 (500) 以获得所需的效果。

var time;
function animatedText() {

  $('.animated-text-content').css('display', 'none');

  $('.animated-text').on('mouseenter', function(e) {
    if(time){
        clearTimeout(time);   
    }
    e.stopPropagation();
    $(this).find('.animated-text-animation').css('justify-content', 'flex-start');
    $(this).find($('.animated-text-content')).delay(600).fadeIn(800);
  });


  $('.animated-text').on('mouseleave', function(e) {
    time = setTimeout($.proxy(function(){
        $(this).find('.animated-text-animation').css('justify-content', 'center');
        $(this).find($('.animated-text-content')).fadeOut(250);
    }, this),500); //Delay   <-------
  });
}