0

我正在尝试“链接”（添加）和附加功能：

原始代码，它激活了 ScrollTo 插件：

$('a.scroll').live('click',function(){   
   $.scrollTo(this.hash+"_", 3333, {easing:'easeOutCubic'} ); 
   window.location.hash = this.hash;
   return false;
});

我想要的是，当页面平滑滚动时，还有一个 div 覆盖淡入，在屏幕上停留几秒钟，然后在平滑滚动结束之前淡出并移除自身。

我已经在正常页面加载时使用了这个名为#preloader 的 div 覆盖，但我还想在 scrollTo 操作期间使用它。（这是一个固定的覆盖 div，里面有一个 css3“加载”动画。）

这是我迄今为止尝试过的一个示例，尝试将其“链接”到：

$('a.scroll').live('click',function(){   
    $.scrollTo(this.hash+"_", 3333, {easing:'easeOutCubic'} ); 
        $('#preloader').fadeIn(1234,function(){  // overlay div
            $(this).delay(1234).remove(); 
        });
    window.location.hash = this.hash;
    return false;
});

有了这个，什么都不会发生。ScrollTo 仍然有效，但没有出现覆盖。

我如何以正确的方式链接它？它需要淡入，然后在设置延迟后淡出。感谢您的帮助，我对 jquery 毫无用处。

4

1 回答 1

0

我无法让它工作，所以我最终得到了不同的效果：

$('a.scroll').live('click',function(){  
    $('body').fadeTo('slow', 0.3);
    $.scrollTo(this.hash+"_", 3333, {easing:'easeInOutExpo'}); 
    window.location.hash = this.hash;
    $('body').fadeTo('slow', 1.0);
    return false;
});

使用它时，ScrollTo 感觉更流畅（不那么跳跃或不流畅）。在平滑滚动发生之前，主体不透明度缩小到 0.3，然后一旦 scrollTo 动画完成，页面内容就会淡入常规的 1.0 不透明度。

这不是我最初想要的，但它确实在使用 scrollTo 时给人一种更平滑的错觉。

于 2012-10-19T08:23:14.983 回答