Question

我希望为div设置动画以使其显示并使用jQuery向下滑动。

我让我的脚本工作，你将鼠标悬停在图像上，另一个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

我认为你调用函数Sub Test_Loop() Dim s, col, q, t, k, i s = "3????0{1012}?121-2[101]--01221111(01)1" Set col = CreateObject("Scripting.Dictionary") q = "_" t = True k = 0 For i = 1 To Len(s) t = (t Or InStr(1, ")]}", q) > 0) And InStr(1, "([{", q) = 0 q = Mid(s, i, 1) If t Then k = k + 1 col(k) = col(k) & q Next MsgBox Join(col.items) ' 3 ? ? ? ? 0 {1012} ? 1 2 1 - 2 [101] - - 0 1 2 2 1 1 1 1 (01) 1 End Sub为show_action删除它并将其余代码移到函数包装之外，否则 hover() 事件处理程序只会绑定在第一次悬停之后。另外使用 stop() 来清除动画队列

＆＃13;

onhover="show_action()

＆＃13;

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

＆＃13;

更新：您可以通过添加以下css

来删除

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

$(".action").hide();

Answer 2

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

.hide()

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

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

jQuery slideDown无法正常运行

2 个答案: