Question

所以我设法将我的index.html链接到jquery但由于某种原因我的.slideDown代码无效。它有什么问题或者我没有正确附加jquery吗？

这是我的html代码（包含.slideDown的代码）：

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<link rel="shortcut icon" href="../Pictures/Logo.png" /> 
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
</head>

<body>

<script>
$("#teamalpha").mouseover(
function(){
    $("#teamalpha > div").slideDown(400);
    });


</script>
<div id="teamalpha">
<div>
<p>AlphaGuardian</p>
<p>Owner</p>
</div>

</div>

</div>

</body>
</html>

这是我的CSS代码（样式表正确链接）：

#teamalpha{


    font-family:Optimus;
    font-size:24px;
    text-align:center;
    border:solid;
    border-color:#000;
    width:250px;
    height:250px;
    position:relative;
    top:100px;
    left:200px;
    cursor:pointer;
    z-index:5;
    }



    #teamalpha div{
    position:relative;
    top:-50px;  
    height:100px;
    display:none;
    width:250;
        background-color:#f7931e;
        z-index:6;
        }

Answer 1

您的<script>需要被

包围

// Fire on document ready event
$(document).ready(function(){
    // some code here
});

OR

// Fire on window load event 
$(window).load(function() {
    // some code here
});

所以看起来应该是这样的：

<script>
// Fire on document ready event
$(document).ready(function() {

    $("#teamalpha", this).on("mouseover", function() {
        $(this).children("div").slideDown(400);
    }); 
}); 
</script>

OR //触发文档就绪事件 $（window）.load（function（）{ $（＆＃34;＃teamalpha＆＃34;，this）.on（＆＃34; mouseover＆＃34;，function（）{ $（本）。儿童（＆＃34; DIV＆＃34）。了slideDown（400）; }）; }）;

您的脚本在页面完全加载之前运行。现在，它等到document或window完成加载。

Answer 2

我制作了一支代码有效的笔：http://codepen.io/KK4OXJ/pen/Eagjax/

基本上，你不能淡化用CSS隐藏的东西，所以我们需要这个： $('#teamalpha div').hide(); 隐藏它，而不是使用CSS来隐藏它。它需要在mousover之前运行，我们还需要删除CSS中的display: none;行。

我希望这会有所帮助：）

.slideDown不适用于我

2 个答案: