使用javascript根据div的高度调整顶部位置

Question

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

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

}

I'm using that function to adjust a div's top position depending on the image that is in it's height. It's on a light box sort of script so every time I click the next button, a new image which could either be taller or smaller appears. It's working alright and it adjusts its position when the image is taller but my problem is it just jumps to that position. I'm really new to javascript so can anyone help me out to make this as if it's travelling/animating to it's position? I tried using setTimeOut but I think I was doing it wrong. I'd really love to know what I'm doing wrong.

Here's the full script if that helps. Link

Answer 1

you can use jQuery or YUI to do animate, such as

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

or you can write some simple code with setTimeout just for this case;

following code assume the begin top is 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);