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

我正在使用基础 4，特别是基础.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

最佳答案

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

.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

关于javascript - Zurb 基础 4 部分和 jQuery 效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16886902/