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

Reseting all other jQuery animations except for the current hovered element

本文关键字:其他 动画 jQuery 元素 悬停      更新时间:2023-09-26

所以我的代码有问题。它工作正常。但是我有三个盒子挨着。悬停时,它们会做一些事情。。。即改变宽度。我有问题。如果你把鼠标移到它们上面,它们就会全部启动。但我只想要你把鼠标停在上面的那个。

因此,当我将鼠标悬停在这些框上时,我需要重置所有其他动画,以阻止一次播放多个框的动画。谢谢

jquery

 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>

您可以使用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   <-------
  });
}