Question

有谁能告诉我我使用.animate()功能的方式有什么问题？

这是我的代码：

var hei = $("#myDiv").css("height");
hei += 5;
hei *= -1;
var ght = "px"
var height = hei + ght

function slidedown1() {
  $("#myDiv").css("top", height);
  $("#myDiv").css("display", "block");
  $("#myDiv").animate({
    top: '0px'
  }, 1000);
  setTimeout(
    function() {
      $("#myDiv").animate({
        top: height
      }, 1000);
      $("#myDiv").css("display", "none");
    }, 15000)
}

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>

<body onload="slidedown1()">
  <div id="myDiv" style="background-color:#000000;color:#ffffff;border-radius:2px;position:absolute;width:100px;height:100px">
    Lorem ipsum and so on
    </div>
  </body>

它应该做的是设置变量以获得div的高度，加5，乘以-1，并在末尾添加'px'。然后它应该将div设置为从页面顶部向上移动该数字，使其为css display:block;而不是display:none;，并将其设置为它应该的位置。然后在15秒后，它应该向上返回div并将display设置回none。

由于某种原因，.animate()无效，但其他一切都无效。

Answer 1

这会将hei设置为100px：

var hei = $("#myDiv").css("height")

这会将其更改为100px5：

hei + = 5;

这会尝试将100px5乘以-1，返回NaN：

hei * = -1;

要解决此问题，请在第一行使用 parseInt() ：

var hei = parseInt($("#myDiv").css("height"), 10);

请注意，您无需向其添加px - px是jQuery css()和animate()函数的默认单位。

<强>段

var hei = parseInt($("#myDiv").css("height"), 10);
hei += 5;
hei *= -1;
var ght = "px"
var height = hei + ght

function slidedown1() {
  $("#myDiv").css("top", height);
  $("#myDiv").css("display", "block");
  $("#myDiv").animate({
    top: '0'
  }, 1000);
  setTimeout(
    function() {
      $("#myDiv").animate({
        top: height
      }, 1000);
      $("#myDiv").css("display", "none");
    }, 15000)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>

<body onload="slidedown1()">
  <div id="myDiv" style="background-color:#000000;color:#ffffff;border-radius:2px;position:absolute;width:100px;height:100px">
    Lorem ipsum and so on
    </div>
  </body>

Answer 2

似乎您需要解析所选的height。如果你使用的是jQuery，那就是触发onload事件的方法：

<强> HTML：

<body>
  <div id="myDiv" style="background-color:#000000;color:#ffffff;border-radius:2px;position:absolute;width:100px;height:100px">
    Lorem ipsum and so on
    </div>
  </body>

<强> JavaScript的：

$(document).ready(function(){

    var hei = parseInt($("#myDiv").css("height"));
    hei += 5;
    hei *= -1;
    var ght = "px";
    var height = hei + ght;

    function slidedown1() {
      $("#myDiv").css("top", height);
      $("#myDiv").css("display", "block");
      $("#myDiv").animate({
        top: '0px'
      }, 1000);
      setTimeout(
        function() {
          $("#myDiv").animate({
            top: height
          }, 1000);
          $("#myDiv").css("display", "none");
        }, 15000);
    }

    slidedown1();

});

FIDDLE： https://jsfiddle.net/lmgonzalves/tmqu09ru/

jQuery .animate（） - 不工作

2 个答案: