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

Question

I'm working on a page that will have a series of images on it. Each image will be in a container, and each container will be floated left. Since the images will have varying widths, there's no way of knowing how many images will be on each row. When a visitor clicks on an image, it and it's container will expand.

In some situations, this expansion means the clicked image will jump to the following row, and will leave the screen because of it. I'm looking for a way of having the screen follow the clicked image wherever it goes.

Here's my code thus far:

<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>

Note that I've used both a callback in the .animate and also a .queue in an attempt to sequence this correctly. Unfortunately, the value this pulls in for the image container's .offset is the old top, and not the one that occurs after the animation. I'm looking for a way of getting the container's top once the animation has completed. Any advice would be very appreciated.

If you'd like to see the above code in action, here's a link. Note that when you arrive at the page and click Example 4, the screen does not scroll down to Example 4's new location.

http://notiondigitalarts.com/ImageEnlargeTest/

Answer 1

Try changing these two lines:

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

To:

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

The way you had it you were't passing a callback function to .queue() and .animate() , you were calling your scrollToExample() function immediately and passing its result to .queue() and .animate() .

Having said that, I don't think you need to use .queue() at all here.

Note also that within your scrollToExample() function you can say Image.closest(... rather than $(Image).closest(... because Image is already a jQuery object. (Unless you want your function to be able to handle other types of inputs.)