Zurb基础4部分和jQuery效果

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代码).我认为像我上面的代码之类的东西会起作用,但我会得到一个Uncaught 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