1

我难住了。我在 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(); 功能应该可以工作。

这是它应该处理的页面

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

看起来“.effect()”对页面上的任何元素都没有任何作用。我还没有弄清楚为什么（我最初认为这是一个 CSS 评估顺序问题，但事实并非如此）。

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

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

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

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

当存在多个库（可能也使用 的库）时使用此技术$。有关详细信息，请参阅将 jQuery 与其他库一起使用。

现在，您似乎想要以sub-menu400 毫秒的延迟为列表项逐一设置动画。您可以使用.each()and来简化代码.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参数中定义.animate()，这消除了一次.animate()调用。i * 400延迟会产生您想要的级联效果。

于 2012-10-08T05:10:01.023 回答