jQuery slideDown 无法正常工作答案

【问题标题】：jQuery slideDown not functioning correctlyjQuery slideDown 无法正常工作
【发布时间】：2015-12-14 20:26:47
【问题描述】：

我希望使用 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>

【问题讨论】：

你有完整的代码吗？可能与 jsfiddle 一起使用。

标签： javascript jquery css jquery-animate

【解决方案1】：

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

$(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>

【讨论】：

【解决方案2】：

我认为您将函数 show_action 调用为 onhover="show_action() 删除它并将其余代码移到函数包装之外，否则 hover() 事件处理程序只会在第一次悬停后绑定。另外使用 stop() 清除动画队列

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=logo>Hover here</div>
<div class=action>content<br>here</div>

更新：您可以通过添加以下 css 来删除 $(".action").hide();

.action {
  display: none;
}

【讨论】：

@JimmyDoe : 乐于助人 :)