javascript - Zurb 基础 4 部分和 jQuery 效果

Question

我使用的是 foundation 4，特别是 foundation.section.js 插件。问题是我想在通过选项卡导航时添加 jQuery 效果，以便内容顺利淡入，而不是仅仅出现在那里。

我读过，为了使用 jQuery 而不是 zepto，我需要在我的 .html 的开头包含脚本文件，就在我所做的 custom.modernizr.js 之后。此外，在我初始化基础之后，我执行以下操作:

$(document).foundation('data-section-title').click(function() {
    $(document).foundation('.active[data-section-region]').fadeIn("slow");
})

data-section-title 是标签标题的数据属性，而 .active[data-section-region] 是事件区域选择(所有这些根据 foundation.section.js v4.1.3 code )。我认为像我上面的代码这样的东西会起作用，但我得到了一个 Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined。

有什么想法可以让它发挥作用吗？顺便说一句，我正在使用 jQuery 1.9.1 和 Zurb Foundation 4.1.6

Answer 1

您可以在不引入另一个库的情况下实现内容淡入淡出的目标。使用下面的 css，您可以淡入部分内容。我在对此进行调查时发现了一个有趣的注意事项，因为 Foundation 使用 display:none/display:block 来切换您不能使用 css transitions 的内容，另一方面动画仍然有效。

.section-container.tabs .content {
  display:block:important!
  opacity: 0; 
}
.section-container.tabs .active .content{
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  opacity: 1;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

这是一个工作示例。 http://jsbin.com/eyazuf/2/edit