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

Question

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

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

}

我正在使用该功能来调整div的顶部位置，具体取决于其高度中的图像。 它在灯箱脚本上，因此每次我单击下一个按钮时，都会出现一个新的图像，该图像可以更高或更低。 它工作正常，当图像更高时会调整其位置，但是我的问题是它只是跳到了那个位置。 我对javascript真的很陌生，所以有人可以帮助我做到这一点，就好像它在旅行/动画到其位置一样吗？ 我尝试使用setTimeOut，但我认为做错了。 我真的很想知道我在做什么错。

如果有帮助，这里是完整的脚本。 链接

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);