简单的 jquery 函数不起作用答案

【问题标题】：Simple jquery function isn't working简单的 jquery 函数不起作用
【发布时间】：2012-09-24 17:26:38
【问题描述】：

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

</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();功能应该可以工作。

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>

【问题讨论】：

尝试运行$(function() {console.log(typeof jQuery);});看是否加载完成，以判断是否真的加载不出来，或者问题是document.ready函数无效，
你不是说没有JavaScript错误吗？
$(".sub-menu").effect("highlight", {}, 3000); 行正在运行。尝试去掉function($)中的$，或者在下一行的大括号后添加(jQuery)。
我在右花括号之后添加了 (jQuery) 并且函数运行了。非常感谢@andrewap。另外，我使用了 blackcatweb 的解决方案，将 '.effect()' 替换为 'animate'，因为 '.effect()' 引发了错误。
@adrewap，不知道如何评价您的回答。 (jQuery) 添加是票。

标签： jquery jquery-ui

【解决方案1】：

看起来 '.effect()' 对页面上的任何元素都没有任何作用。还没弄明白为什么（本来以为是CSS求值顺序问题，其实不是）。

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

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

【讨论】：

感谢 blackcatweb。我不知道为什么 .effect() 也不做任何事情，但你使用 .animate 的想法让我朝着一个好的方向前进。

【解决方案2】：

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

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

当存在多个库（可能也使用$ 的库）时使用此技术。详情请见Using jQuery with Other Libraries。

现在，您似乎想要以 400 毫秒的延迟为 sub-menu 列表项逐一设置动画。您可以使用.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）在.animate() 的complete 参数中定义，这消除了一个.animate() 调用。 i * 400 延迟会创建您想要的级联效果。

【讨论】：