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

我正在制作一个页面，该页面上会有一系列图像。每个图像将位于一个容器中，并且每个容器都会左移。由于图像的宽度不同，因此无法知道每行上会有多少图像。当访问者点击图片时，它和它的容器将会扩大。如何在动画函数的回调中使用由动画函数创建的属性？

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

这里是我的代码迄今：

<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回调。不幸的是，这个图像容器的值为顶部，而不是在动画之后出现的值。我正在寻找一种在动画完成后获取容器顶部的方法。任何建议将非常感激。

如果你想看到上面的代码在行动，这里有一个链接。请注意，当您到达页面并单击示例4时，屏幕不会向下滚动到示例4的新位置。

http://notiondigitalarts.com/ImageEnlargeTest/

来源

2012-07-16 JohnNotion

尝试改变这两条线：

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

要：

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

你有你were't传递一个回调函数.queue()的方式和.animate()，你正在呼叫您的scrollToExample()函数并将其结果传递给.queue()和.animate()。

话虽如此，我不认为你需要使用.queue()的一切都在这里。

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

来源

2012-07-17 00:32:17 nnnnnn

非常感谢。你钉了它。仍围绕回调包裹我的头，这有很大帮助。很好地忽略了$也是。当我早些时候调整事情时，错过了这一点。仍然在Stackoverflow中获得我的权限，或者我也会给你一个加票。 – JohnNotion 2012-07-17 04:20:02

不客气。请注意，您不必将匿名函数作为回调函数传递，您可以像'Image.queue（scrollToExample）一样执行'，但是不能将参数传递给回调函数。 – nnnnnn 2012-07-17 05:29:29

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

回答

相关问题