Jquery fadeIn无效

Question

我正在写一个html页面然后我有这个div：

<div id = "insert" class="new">

和这个div的风格：

 .new {
    background-color: #DDDDDD;
    margin-top:15px;
    margin-left: 30px;
    margin-right:30px;
    display:none;
    }

所以，我尝试使用FadeIn（）并使这个div出现，但它不起作用！这是我写的jquery：

$("#add").click(function(){
$("#insert").fadeIn();
});

“add”是要单击的按钮的ID。 你们知道发生了什么问题吗？

Answer 1

你的div高度和宽度不正确，div高度为零。所以你可以看到div。

如果您想要更流畅的动画，可以提供fadeIn(time in milliseconds)参数。

更多信息可以获得here

$("#add").click(function() {
  $("#insert").fadeIn();
});

.new {
  background-color: #DDDDDD;
  margin-top: 15px;
  margin-left: 30px;
  margin-right: 30px;
  display: none;
  width:100px;
  height:100px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="insert" class="new"></div>
  <button id='add'>add</button>

Answer 2

你的jquery错了：

$("#add").click(function(){ $("#insert").fadeIn(); });

什么是“#insert”？看到这个小提琴：http://jsfiddle.net/herrfischerhamburg/su6wxp8q/1/

是的，DIV是空的，没有定义高度。