0

我正在处理一个包含一系列图像的页面。每个图像将在一个容器中，每个容器将向左浮动。由于图像将具有不同的宽度，因此无法知道每行上有多少图像。当访问者单击图像时，图像及其容器将展开。

在某些情况下，这种展开意味着被点击的图片会跳转到下一行，并因此离开屏幕。我正在寻找一种让屏幕跟随点击的图像的方式。

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

<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是旧的顶部，而不是动画之后出现的那个。我正在寻找一种在动画完成后获取容器顶部的方法。任何建议将不胜感激。

如果您想查看上述代码的运行情况，请点击此处的链接。请注意，当您到达该页面并单击示例 4 时，屏幕不会向下滚动到示例 4 的新位置。

http://notiondigitalarts.com/ImageEnlargeTest/

4

1 回答 1

0

尝试更改这两行：

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()and .animate()，而是立即调用您的scrollToExample()函数并将其结果传递给.queue()and .animate()。

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

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

于 2012-07-17T00:32:17.110 回答