javascript – 具有初始未定义高度的jQueryui动画

2023年12月2日 226次阅读

看下面的小提琴：

[编辑：更新小提琴=> http://jsfiddle.net/NYZf8/5/]

http://jsfiddle.net/NYZf8/1/(以不同的屏幕尺寸查看,因此理想情况下图像适合％-width layouted div)

图像应从动画完成后正确显示的位置开始动画.
我不明白为什么第一次调用setMargin()设置一个负边距,即使容器div和img的记录高度是相同的,在jqueryui show()调用之后设置图像我想要的位置(从一开始).我的猜测是,不管怎样,图像高度都是0 /未定义,即使它记录正常：

JS：

console.log('img: ' + $('img').height());
console.log('div: ' + $('div').height());

$('img').show('blind', 1500, setMargin);

function setMargin() {
    var marginTop =
    ( $('img').closest('div').height() - $('img').height() ) / 2;

    console.log('marginTop: ' + marginTop);

    $('img').css('marginTop', marginTop + 'px');
}

setMargin();

最佳答案 有趣的问题…在玩了一段时间的代码(最新的更新)之后,我看到盲目的动画实际上并没有在我的浏览器中触发(我在Chrome上测试,也许是在解雇但是我不是看到它,因为图像从未隐藏在第一个位置),所以我尝试在绑定的加载函数中移动它：

$('img').bind('load', function() {
    ...
    $(this).show('blind', 500);
});

现在它是动画,它似乎在动画完成后“快照”或“跳跃”,并且似乎也出现了不正确的边距.这有点jQuery无法正确计算屏幕上尚未显示的内容的尺寸.最重要的是,盲人似乎需要更明确的尺寸来正确操作.因此存在的问题是：如何在元素实际出现在屏幕上之前计算它们的渲染尺寸？

一种方法是淡化你试图计算的尺寸非常小的元素 – 还不足以看到 – 进行一些计算,然后再次隐藏它并为外观动画做好准备.您可以使用fadeTo函数使用jQuery实现此目的：

$('img').bind('load', function() {

    $(this).fadeTo(0, 0.01, function() {

        // do calculations...

    }
}

您需要计算尺寸,使用css()函数应用它们,使图像失明,然后将图像样式重置回原始状态,这一切都要归功于明确需要这些尺寸的盲动画.我还建议使用CSS中的类来帮助您更好地管理事物.这是一个详细的工作示例：jsfiddle working example

不是最优雅的做事方式,但这是一个开始.有更简单的方法来实现看似更好的结果,我想我只是想知道你为什么要用这种方式做图像百叶窗和显式对齐？使用您使用的代码实现它更具挑战性……无论如何,希望这会有所帮助！ 🙂

点赞