jQuery slideDown 无法正常工作

Posted 2023-05-08

【中文标题】jQuery slideDown 无法正常工作

【英文标题】：jQuery slideDown not functioning correctly

【发布时间】：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 一起使用。

【参考方案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 : 乐于助人 :)