javascript - jQuery SlideDown 无法正常工作

Question

我希望用 jQuery 对 div 进行动画处理，使其出现并向下滑动。

我的脚本可以工作，您将鼠标悬停在图像上，另一个 div 滑入，如果用户离开鼠标悬停，div 将向上滑动并消失。

问题:

我第一次将鼠标悬停在图像上时，没有任何反应。我必须离开鼠标并再次将鼠标悬停在其上才能使效果开始起作用，我不明白这是为什么？？？

jQuery:

function show_action(){
    $(function(){
        $(".action").hide();
        $(".logo").hover(
            function(){ $(".action").slideDown(); },
            function(){ $(".action").slideUp(); }
        );
    });
}

CSS:

#action_text{
    display:none;
}

HTML:

<div class="center_container">
  <div class="action" id="action_text"><span>Click To Upload</span></div>
  <img src="images/logo.png" class="logo" onmouseover="show_action();"> 
</div>

Answer 1

无需在 .action 元素上调用 .hide()。只需在 css 中指定 display: none 即可，这样页面加载时就不会显示。这样，您就不需要 .stop() 来清除动画队列，并且还可以防止 .action 元素出现时出现“闪烁”效果当页面加载一小会儿直到 .hide() 被调用时。

$(document).ready(function() {
  $('.logo').hover(
    function() {
      $(".action").slideDown();
    },
    function() {
      $(".action").slideUp();
    }
  );
});

.action {
  width: 100%;
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="logo">LOGO</span>
</div>

<div class="action">
  <span>Action</span>
</div>