Setzt alle anderen jQuery-Animationen mit Ausnahme des aktuellen Elements hovered zurück

Question

Also habe ich ein Problem mit meinem Code. Es funktioniert normal. Aber ich habe 3 Kästchen nebeneinander. Beim Schweben, Sie tun Sachen ... dh Breite ändern. Das Problem, das ich habe. Wenn Sie Ihre Maus über alle bewegen, beginnen sie alle. aber ich will nur die, auf die du deine Maus bringst.

Also muss ich alle anderen Animationen zurücksetzen, wenn ich den Mauszeiger über eines dieser Kästchen halte, um zu verhindern, dass mehr als eine Box gleichzeitig animiert wird. Vielen Dank!

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

Sie die stopPropagation Methode verwenden könnte, so dass jetzt mehr als die, die Sie mit der Maus stoppen auf ist Auslöser ed. Stellen Sie die Verzögerung (500) nach Bedarf auf den gewünschten Effekt ein.

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