Question

请参阅以下小提琴：

[编辑：更新小提琴=＆gt; 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();

Answer 1

有趣的问题...在玩了一段时间的代码（最新更新）之后，我看到blind动画实际上并没有在我的浏览器中触发（我在Chrome上测试，也许是正在开火，但我没有看到它，因为图像从未隐藏在第一个位置），所以我尝试移动内部绑定的load函数：

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

现在它是动画，它似乎在动画完成后“快照”或“跳跃”，并且似乎也出现了不正确的边距。这有点jQuery无法正确计算屏幕上尚未显示的内容的尺寸。最重要的是，blind似乎需要更明确的维度才能正常运行。所以问题在于：如何在元素实际出现在屏幕上之前计算元素的渲染尺寸？

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

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

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

        // do calculations...

    }
}

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

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

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

1 个答案: