3

私はfoundation 4、具体的にはfoundation.section.jsプラグインを使用しています。問題は、タブをナビゲートするときに jQuery 効果を追加して、コンテンツがそこに表示されるのではなく、スムーズにフェードインするようにすることです。

zepto の代わりに jQuery を使用するには、.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 に答える