javascript - SlideUp 上升，虽然选择的类还没有离开

Question

function hoverimgon(elem){
             $(elem).find('.credentials-popup').slideDown(800);
    }
               
    function hoverimgoff(elem){
            $(elem).find('.credentials-popup').slideUp(800);
    }
      

.credentials-element {
  max-width: 1170px;
  margin-bottom: 80px;
}


.ct-el-color {
  height: 250px; 
  background-color: coral;
}

.credentials-popup{
  display: none;
  max-width: 1170px;
  background-color: #DD3330;
  color: #ffffff;
  height: 250px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
            <div class="ct-el-color"></div>
          
            <div class="credentials-popup">
                Something
            </div>
      </div>
      
      <div class="credentials-element" onmouseover="hoverimgon(this)" onmouseout="hoverimgoff(this)">
            <div class="ct-el-color"></div>
          
            <div class="credentials-popup">
                Something
            </div>
      </div>

SlideUp 上升，虽然选择的类还没有离开。尽管有几个元素具有相同的类，但第二个 div 应该只与鼠标悬停元素一起出现，而不是与所有元素一起出现。如果用鼠标选择了第二个，这不应该消失，就像这种情况一样，您应该可以在凭据弹出窗口中选择一些东西。错误是什么？

Answer 1

使用jQuery :visible Selector并在鼠标离开隐藏消息区域时隐藏。

function hoverimgon(elem) {
  var $slide = $(elem).find('.credentials-popup');
  if (!$slide.is(":visible")) { // only slide down if hidden
    $slide.slideDown(800)
  }
}

function hoverimgoff(elem) {
  if ($(elem).is(":visible")) { // only slide up if visible
    $(elem).slideUp(800);
  }
}

.credentials-element {
  max-width: 1170px;
  margin-bottom: 80px;
}

.ct-el-color {
  height: 250px;
  background-color: coral;
}

.credentials-popup {
  display: none;
  max-width: 1170px;
  background-color: #DD3330;
  color: #ffffff;
  height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="credentials-element" onmouseover="hoverimgon(this)">
  <div class="ct-el-color"></div>
  <div class="credentials-popup" onmouseout="hoverimgoff(this)">
    Something
  </div>
</div>

<div class="credentials-element" onmouseover="hoverimgon(this)">
  <div class="ct-el-color"></div>
  <div class="credentials-popup" onmouseout="hoverimgoff(this)">
    Something
  </div>
</div>