在Zurb Foundation淡出标签？

Question

我正试图弄清楚是否有设置在Zurb Foundation中很好地淡出标签.

如果没有,有没有人知道手动实现这个的最佳方法？

在jQuery中定位什么？

谢谢.

Answer 1

使用Zurb v5和这篇文章,我可以通过在foundation.css中添加自定义部分来完成淡化选项卡,如下所示:

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.5rem; 

  /* Customized */
  display:block:important!
  opacity: 0;
}
  /* Customized */
  @-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    float: left;
    padding: 0.9375rem 0; }
    .tabs-content > .content.active {

      /* Customized */
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
      opacity: 1;

      display: block; }

Answer 2

将此行代码替换u.css("display","block").addClass("active")为u.fadeIn('slow').addClass("active")Foundation.min.js 的第 49 行

如果您使用的是未压缩的js
NB：我还没有测试过未压缩的js
将此行代码替换$content.css('display', 'block').addClass('active');为$content.fadeIn('slow').addClass('active');jquery.foundation.tabs.js的第36行