3

いくつかのスウッシー メニューを作成するために、<li>jQuery を使用して要素に CSS トランジション プロパティを設定しようとしています。HTML は次のようになります。

<ul class="main-nav">
  <li>
    <a href="#">Top Level 1</a>
    <ul class="main-nav-child">
      <li><a href="#">Second Level 1</a></li>
      <li><a href="#">Second Level 2</a></li>
      <li><a href="#">Second Level 3</a></li>
      <li><a href="#">Second Level 4</a></li>
      <li><a href="#">Second Level 5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Top Level 2</a>
    <ul class="main-nav-child">
      ...
    </ul
  </li>
</ul>

メニューの項目ごとに XXX が増加する の各"transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease"要素に の遷移を適用しようとしています。.main-nav-child

ループを使用し.each()て各トップ レベル リスト項目を反復処理し、その内部で別のループを使用して内部リスト内の項目を反復処理しています。次に、JavaScriptでトランジションを設定しようとしています:

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    c.style.WebkitTransition = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MozTransition    = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.MsTransition     = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.OTransition      = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
    c.style.transition       = "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
  });
});

これを読んで、jQueryの.css方法を使ってみました：

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css({
      WebkitTransition : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MozTransition    : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      MsTransition     : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      OTransition      : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease",
      transition       : "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease"
    });
  });
});

また、DOM ではなく CSS スタイルのスタイル プロパティ名を使用してみました。

$('.main-nav > li').each(function(i, child) {
  $(child).find(".main-nav-child li").each(function(j, c) {
    $(c).css("-webkit-transition", "transform 0.3s ease-in-out " + 2*(j+1) +"s, padding-left 0.1s ease");
  });
});

問題

ループは正常に機能しているようで、Chrome の Web インスペクターをいじった後、c.style.WebkitTransition何かを設定しようとすると機能するようですが、プロパティは保存されません。コンソールでも同じことを行います (こちらを参照してください: http://cl.ly/Lbau )

私は半日の大半でこれをいじっているので、誰かが私を助けることができれば、私は最も感謝しています!

乾杯。

4

1 に答える 1

0

変換は、まだサポートされているアニメーション プロパティではありません。ソース

変換設定を取り出すと、問題なく設定されるはずです。

于 2012-12-14T19:04:21.533 に答える