1

私は困惑しています。wordpress テーマの footer.php に単純な jquery 関数を追加しましたが、何もしないようです。さらに単純な hide(); を試しました。機能し、それも起動しませんでした。jqueryをまったく起動できませんが、jqueryライブラリは間違いなく私のテーマにロードされています（これはtwentyelevenに基づいています）。これが私のコードです：

</footer><!-- #colophon -->
</div><!-- #page -->

<script>
jQuery(document).ready(function ($) {
    $(".sub-menu").effect("highlight", {}, 3000);
}); 
</script>


<?php wp_footer(); ?>

</body>
</html>

functions.php を介して jquery ui コア エフェクトをロードし、Chrome インスペクターを使用するとサイトのリソースに表示されることを確認したので、highlight(); 関数が動作するはずです。

作業するページは次のとおりです

jquery スクリプトが実行されないのはなぜですか?

ありがとう！

ケニー

編集

最終的なコードは次のとおりです（悲しいことに、要素を介して効果を再帰的にする方法はわかりませんが、これでうまくいきます<li>）：

<script>
jQuery(document).ready(function ($) {
setTimeout(function() {
    $('.sub-menu li:first-child').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:first-child').animate({ marginRight: '0' }, 500);
    setTimeout(function() {
    $('.sub-menu li:nth-child(2)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(2)').animate({ marginRight: '0' }, 500);
    }, 400);
    setTimeout(function() {
    $('.sub-menu li:nth-child(3)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(3)').animate({ marginRight: '0' }, 500);
    }, 800);
    setTimeout(function() {
    $('.sub-menu li:nth-child(4)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(4)').animate({ marginRight: '0' }, 500);
    }, 1200);
}, 3000);

}(jQuery)); 
</script>
4

2 に答える 2

1

$引数が定義されていないため、スクリプトは実行されていません。(jQuery)解決策は、右中括弧の後に追加することです:

jQuery(document).ready(function ($) {
    $(".sub-menu").effect("highlight", {}, 3000);
}(jQuery));

この手法は、複数のライブラリ (潜在的に も使用するライブラリ$) が存在する場合に使用されます。詳細については、他のライブラリでの jQuery の使用を参照してください。

sub-menuここで、400 ミリ秒の遅延でリスト項目を 1 つずつアニメーション化したいようです。.each()と を使用してコードを簡素化できます.delay()。

jQuery(document).ready(function ($) {

    // iterate over li in .sub-menu
    // NOTE: the overall initial delay is 3000 ms
    $('.sub-menu li').delay(3000).each(function (i) {

        // the effect sets margin-right to 15px, then to 0 after completion
        // NOTE: the delay increases by 400 ms for each item
        $(this).delay(i * 400).animate({ marginRight: '15px' }, 500, 'linear', function () {
            // this is the 'complete' callback function
            $(this).animate({ marginRight: '0' }, 500);
        });

    });

}(jQuery));

アニメーションの 2 番目の部分 (0 に設定) は の引数でmargin-right定義されているため、呼び出しが 1 つなくなります。遅延により、必要なカスケード効果が作成されます。complete.animate().animate()i * 400

于 2012-10-08T05:10:01.023 に答える
1

「.effect()」はページのどの要素にも何もしていないようです。理由はわかりません（もともとCSSの評価順の問題だと思っていましたが、そうではありませんでした）。

これは受け入れられる代替手段ですか？

$('.sub-menu').animate({ backgroundColor: '#ffff99' }, 3000);
于 2012-10-03T19:09:55.953 に答える