JavaScript 用于在时钟上出现新内容并同时隐藏主要内容

Question

JS不是我的强项，但我需要像这里一样创建功能(左侧固定菜单(。

简而言之，我们有主要内容和带有链接的菜单。单击其中之一 - 我们获得了所有新内容(旧淡入淡出任何地方(并按钮返回它。就像上面的例子一样。

也许有一些插件/库？

Answer 1

有几个插件允许做这种类型的动画，我建议您使用 https://github.com/miguel-perez/smoothState.js 因为它效果很好，易于使用(您需要做的就是为您的页面和 init 插件创建必要的 html，$('#yourwrapper').smoothState();之后，页面上的所有链接都将通过 AJAX 处理并替换内容(并且得到很好的支持， 因此，如果在实施过程中遇到任何问题，您将轻松找到答案。

以下是带有侧边栏淡入淡出动画的演示示例： https://rawgit.com/miguel-perez/smoothState.js/master/demos/sidebar/page-four.html

Answer 2

使用 jQuery 淡出一些内容并淡入其他一些内容非常容易。只需将您的初始内容和次要内容包装在包装器中，定位和需要并为新内容/菜单设置display:none。然后像这样简单的东西就可以工作了，不需要库：

$('.eventHandler').on('click', function(){
  $('.initialContent').fadeOut();
  $('.newContent').fadeIn();
})

至于很酷的库，我喜欢ScrollMagic，而Animate.css非常适合简单的动画(比如在参考页面加载时跳跃的圆圈(。

希望这有帮助！