Question

我正在使用jQuery中的两个插件：jquery.scrollTo和jquery.Colorbox，我遇到了一个问题，我觉得很简单。

我想要做的是在scrollTo事件结束后立即触发colorbox。

ScrollTo实际上支持使用onAfter设置的回调，它可以处理简单的alert（）消息。但是当我编写一个执行colorbox的函数时，它不起作用：colorbox与scrollTo一起执行（窗口滚动并打开颜色框div）。

我有以下代码：

<script type="text/javascript">
 $(document).ready(function(){
  function abreCbox(){
   $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"})
  }

  $.scrollTo('#home',{offset: {left: -100, top: -100}});

  $.localScroll({
   axis: 'xy',
   queue: true,
   duration: 1800,
   onAfter: abreCbox,
   offset: {left: -100, top: -100}
  });  
 })
</script>

我不知道onAfter函数是如何工作的，所以我求求你帮忙= D

非常感谢你。

Answer 1

你有这段代码

function abreCbox(){
   $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"})
}

在$(document).ready(function() ...内，意味着文档准备好后执行 onAfter部分没问题，您只需将函数声明移到外面即可。

//for reuse later
function abreCbox(){
 $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"})
}
$(document).ready(function(){
  $.scrollTo('#home',{offset: {left: -100, top: -100}});

  $.localScroll({
   axis: 'xy',
   queue: true,
   duration: 1800,
   onAfter: abreCbox,
   offset: {left: -100, top: -100}
  });  
 });

如果您不预测稍后将重用函数abreCbox，则建议将匿名函数传递给onAfter并完全删除声明，如下所示：

$(document).ready(function(){
  $.scrollTo('#home',{offset: {left: -100, top: -100}});
  $.localScroll({
   axis: 'xy',
   queue: true,
   duration: 1800,
   onAfter: function (){
       $(".abrircbox").colorbox({width: "50%",inline: true, href:"#inline_example1"});
   },
   offset: {left: -100, top: -100}
  });  
});

jQuery.scrollTo之后的jQuery.Colorbox

1 个答案: