Question

我很难过。我在wordpress主题的footer.php中添加了一个简单的jquery函数，但它似乎没有做任何事情。我尝试了一个更简单的hide（）;功能，但也没有。我根本无法获取任何jquery，但jquery库肯定会加载到我的主题中（它基于二十二）。这是我的代码：

</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检查器时看到它显示在网站的资源中，所以突出显示（）;功能应该有效。

Here's the page it should be working on

为什么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>

Answer 1

看起来'.effect（）'对页面上的任何元素都没有任何作用。我还没弄明白为什么（我原本认为这是一个CSS评估订单问题，但事实并非如此）。

这是可接受的替代方案吗？

$('.sub-menu').animate({ backgroundColor: '#ffff99' }, 3000);

Answer 2

您的脚本未运行，因为未定义$参数。解决方案是在结束花括号后添加(jQuery)：

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

当存在多个库（可能还使用$的库）时使用此技术。有关详细信息，请参阅Using jQuery with Other Libraries。

现在，您似乎希望逐个动画sub-menu列表项，延迟时间为400毫秒。您可以使用.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));

动画的第二部分（将margin-right设置为0）在complete的{{1}}参数中定义，这消除了一个.animate()调用。 .animate()延迟会产生您想要的级联效果。

简单的jquery功能不起作用

2 个答案: