3

我正在使用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代码）。我认为像我上面的代码这样的东西会起作用，但是我得到了一个 Uncaught TypeError: Cannot use 'in' operator to search for 'display' in undefined.

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

4

2 回答 2

8

您可以在不引入其他库的情况下实现淡入内容的目标。使用下面的 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

于 2013-06-27T11:46:30.380 回答
0

您是否删除/注释掉了这段代码？此脚本检查浏览器对 proto 的支持并确定它是否应该加载 zepto 或 jquery 库

<script>
    document.write('<script src=' +
    ('__proto__' in {} ? '<your path here>/js/vendor/zepto' : '<your path here>/js/vendor/jquery') +
    '.js><\/script>')
</script>

此外，您不需要使用 jquery 来淡入。您可以使用 zepto 做到这一点。

$('.some-class').fadeIn('slow');

如果您特别希望在浏览选项卡时添加 jQuery 淡入效果，您可以修改 Foundation.js 文件（或覆盖它）。看看这个堆栈溢出答案。 在 Zurb Foundation 中淡入选项卡

于 2013-07-02T13:26:47.080 回答