CODEWITHSUNDEEP
jquerycss
WBsimps
WBsimps

Reputation: 5

.mouseover is activating while the .mouseleave function is still playing

I am new to coding and just starting to learn so bear with me.

I am trying to use jQuery to make the body of a panel(card) slideDown when I'm hovering over the panel header, and slideUp when no longer hovering over the panel header or body. each action, slideDown and slideUp takes 500 milliseconds. here is what I have: 

$(document).ready(function() {
  $('#body1').hide();
  $('#card1' || '#body1').hover(
    function() {
      $("#body1").slideDown(500);
    },
    function() {
      $('#body1').slideUp(500);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3 col-6 cardPadding">
  <div id="card1" class="js card border-primary">
    <div class="card-header bg-primary text-white">
      #card1
    </div>
    <div id="body1" class="js card-body">content
    </div>
  </div>
</div>



What happens is if I hover on and off the panel while .slideDown is happening, it will .slideUp and .slideDown each time I moved my mouse over the panel. I only want .mouseover to be recognised when the .slideDown action is no longer being played. Any ideas?

Upvotes: 0

Views: 33

Answers (1)

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

I think you can achieve what you want using jQuery .stop() function. Check the snippet if that's the required behavior and I'll add additional info.

$(document).ready(function() {
  $('#body1').hide();
  $('#card1' || '#body1').hover(
    function() {
      $("#body1").stop().slideDown(500);
    },
    function() {
      $('#body1').stop().slideUp(500);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3 col-6 cardPadding">
  <div id="card1" class="js card border-primary">
    <div class="card-header bg-primary text-white">
      #card1
    </div>
    <div id="body1" style="background-color:red;" class="js card-body">content
    </div>
  </div>
</div>

Upvotes: 1

Related Questions