重置所有其他jQuery動畫，除了當前的懸停元素

Question

因此，我的代碼有問題。它正常工作。但我有3個盒子相鄰。在盤旋時，他們做東西......即改變寬度。我有這個問題。如果你將鼠標移動到所有人上面，他們都會開始。但我只是想讓你停下你的鼠標。

所以我需要當我將鼠標懸停在這些箱子任何人從在同一時間進行動畫停止超過一個箱重置所有其他的動畫。謝謝！

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> 

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 <------- 
    }); 
}