具有初始未定义高度的 jQuery ui 动画

Question

请看下面的小提琴：

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

http://jsfiddle.net/NYZf8/1/（以不同的屏幕尺寸查看，以便理想情况下图像适合 %-width 布局的 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();

Answer 1

有趣的问题...在使用您的代码一段时间后（最新更新），我看到 blind 动画实际上并没有在我的浏览器中触发（我正在 Chrome 上进行测试，也许它正在触发但我没有看到它，因为图像从一开始就没有隐藏），所以我尝试将它移动到 inside 绑定的 load 函数中：

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

现在它正在制作动画，在动画完成后它似乎“捕捉”或“跳跃”，并且似乎出现了错误的边距。这有点 jQuery 无法正确计算尚未在屏幕上显示的东西的尺寸。最重要的是，blind 似乎需要更明确的维度才能正确运行。那么问题就在这里：如何在元素实际出现在屏幕上之前计算它们的渲染尺寸？

执行此操作的一种方法是让您尝试计算其尺寸的元素非常轻微地淡入 - 还不足以看到 - 进行一些计算，然后再次将其隐藏并为外观动画做好准备。您可以使用 jQuery 使用 fadeTo 函数来实现这一点：

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

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

        // do calculations...

    }
}

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

不是最优雅的做事方式，但它是一个开始。有很多更简单的方法可以实现看似更好的结果，我想我只是想知道您为什么要以这种方式进行图像遮蔽和显式对齐？使用您使用的代码实现它更具挑战性......无论如何，希望这会有所帮助！ :)