Отрегулируйте верхнее положение в соответствии с высотой div с javascript

Question

function jsiBoxAdjustTop() 
{ 
    var top 
    if (jsiBox.preloadImg.height <= 699){ 
     top = 216; 

    } 
    else{ 
     top = 17; 
    } 
    jsiBox.boxNode.style.top = (top) + 'px'; 

} 

Я использую эту функцию для настройки верхнего положения div в зависимости от изображения, которое находится на его высоте. Это на скрипте с легким полем, поэтому каждый раз, когда я нажимаю следующую кнопку, появляется новое изображение, которое может быть выше или меньше. Он работает нормально, и он корректирует свое положение, когда изображение выше, но моя проблема заключается в том, что он просто перескакивает на эту позицию. Я действительно новичок в javascript, так что может кто-нибудь помочь мне сделать это, как будто он путешествует/оживляет его позицию? Я пробовал использовать setTimeOut, но я думаю, что делаю это неправильно. Мне очень хотелось бы знать, что я делаю неправильно.

Вот полный сценарий, если это поможет. Link

Answer 1

вы можете использовать JQuery или YUI сделать одушевленные, такие, как

jQuery(jsiBox.boxNode).animate({'top': top}, 3000); 

или вы можете написать простой код с setTimeout только для этого случая;

следующий код предположим начать верх 0.

var boxStyle = jsiBox.boxNode.style; 

function animateTop(to) { 
    boxStyle.top = parseInt(boxStyle.top, 10) + 1 + 'px'; 
    if (parseInt(boxStyle.top, 10) != to) { 
     setTimeout(function() { 
      animate(to); 
     }, 50); 
    } 
} 

animateTop(top);