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 's высоту, добавить 5 умножить на -1, и добавить' точек ' в конце. Затем он должен установить, что div будет подниматься вверх по этому номеру с верхней части страницы, сделайте его css display:block; вместо display:none; и анимируйте его до того места, где оно должно быть. Затем через 15 секунд он должен вернуть div вверх и установить display обратно на none.

По какой-то причине .animate() не работает, но все остальное.

источник

2015-05-27 Beginner

Так что вы хотите ДИВ начать экран, а затем спуститься с вершины в исходное положение? –

Похоже, что вам нужно разобрать выбранные 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;

Это попытка умножить 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>

источник

2015-05-27 19:39:02

jQuery .animate() - не работает

ответ

Смежные вопросы