Сброс всех других анимаций 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, так что теперь больше, чем тот, который вы остановить мышь on является триггером редактор Отрегулируйте задержку (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 <------- 
    }); 
}