jQuery .animate（） - 不工作

任何人都可以告诉我我如何使用.animate()函数有什么问题？jQuery .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()不起作用，但其他一切都是。

来源

2015-05-27 Beginner

所以，你要的div来开始屏幕，然后从顶部到原来的位置降下来？ –

似乎是你需要解析所选的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/

来源

2015-05-27 19:38:51 lmgonzalves

这设置hei到100px：

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

此它改变到100px5：

hei + = 5;

这试图通过-1相乘100px5，返回NaN：

hei * = -1;

为了解决这个问题，第一次使用parseInt() NE：

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>

来源

2015-05-27 19:39:02

jQuery .animate（） - 不工作

回答

相关问题