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

Question

请参阅以下 fiddle :

[编辑:更新 fiddle => http://jsfiddle.net/NYZf8/5/ ]

http://jsfiddle.net/NYZf8/1/ (在不同的屏幕尺寸下查看，理想情况下图像适合 %-width 布局的 div)

图像应该从动画完成后正确出现的位置开始动画。我不明白为什么第一次调用 setMargin() 会设置负边距，即使容器 div 和 img 的记录高度完全相同，在 jqueryui show() 之后 调用将图像设置在我想要的位置(从一开始)。我的猜测是图像高度毕竟是 0/undefined，即使它记录正常 :?

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 绑定(bind)的 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() 函数应用它们，隐藏图像，然后将图像样式重置回它们的原始状态，这一切都要归功于 明确需要这些维度的盲 动画。我还建议在 css 中使用类来帮助您更好地管理事情。这是一个详细的工作示例:jsfiddle working example

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