Question

我正在使用基础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）。我认为像我上面的代码之类的东西可以工作，但我得到一个未捕获的TypeError：不能使用'in'运算符来搜索未定义的'display'。

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

Answer 1

您可以在不引入其他库的情况下实现淡入内容的目标。使用下面的CSS可以淡出部分内容。我在调查时发现了一个有趣的注意事项，因为基金会使用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

Answer 2

您删除/注释掉此代码了吗？此脚本检查浏览器对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文件（或覆盖它）。看看这个Stack Overflow答案。 Fade in tabs in Zurb Foundation

Zurb基础4部分＆amp; jQuery效果

2 个答案: