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（） - 不工作

回答

相關問題