如何在该动画函数的回调中使用由动画函数创建的属性？

Question

我正在处理一个包含一系列图像的页面。 每个图像将在一个容器中，并且每个容器将向左浮动。 由于图像的宽度会变化，因此无法知道每行上有多少图像。 当访客点击图片时，图片及其容器就会展开。

在某些情况下，这种扩展意味着单击的图像将跳至下一行，并因此而离开屏幕。 我正在寻找一种使屏幕无论走到哪里都跟随点击的图像的方法。

到目前为止，这是我的代码：

<script type="text/javascript">
$(document).ready(function(){
    $(".ExampleImage").toggle(
        function(){
            var Image = $(this);
            var Container = $(this).closest(".ImageContainer");
            Image.switchClass("ExampleImageContracted","ExampleImageExpanded",500);
            Container.css('height','auto');
            Image.queue(scrollToExample(Image));
        },
        function(){
            var Image = $(this);
            var Container = $(this).closest(".ImageContainer");
            Image.switchClass("ExampleImageExpanded","ExampleImageContracted",500);
            Container.animate({'height':'250'},500,scrollToExample(Image));
        }
    );

    function scrollToExample(Image) {
        var NewTop = $(Image).closest(".Example").offset();         
        $('html, body').animate( {
            scrollTop:NewTop.top
        }, 1000);   
    }
});
</script>

请注意，我在.animate和.queue中都使用了回调，以尝试正确地对其进行排序。 不幸的是，它为图像容器的.offset输入的.offset是旧的顶部，而不是在动画之后出现的值。 我正在寻找一种在动画完成后获取容器顶部的方法。 任何建议将不胜感激。

如果您想查看上面的代码，请访问以下链接。 请注意，当您到达页面并单击示例4时，屏幕不会向下滚动到示例4的新位置。

http://notiondigitalarts.com/ImageEnlargeTest/

Answer 1

尝试更改这两行：

Image.queue(scrollToExample(Image));
...
Container.animate({'height':'250'},500,scrollToExample(Image));

至：

Image.queue(function() { scrollToExample(Image); });
...
Container.animate({'height':'250'},500,function(){scrollToExample(Image);});

您没有将回调函数传递给.queue()和.animate() ，而是立即调用scrollToExample()函数并将其结果传递给.queue()和.animate() 。

话虽如此，我认为您根本不需要在此使用.queue() 。

还请注意，在scrollToExample()函数中，您可以说Image.closest(...而不是$(Image).closest(...因为Image已经是jQuery对象。（除非您希望函数能够处理）其他类型的输入。）