简单的jQuery功能不起作用

我很难过。我在wordpress主题的footer.php中添加了一个简单的jquery函数，但它似乎没有做任何事情。我尝试了一个更简单的hide（）;功能，也没有触发。我根本无法获得任何jQuery，但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>

来源

2012-10-03 Kenny

尝试运行'$（function（）{console.log（typeof jQuery）;}）;'看看它是否被加载，以检查是否真的加载，或者如果问题是无效的文档。 ready函数， – adeneo

而你并不是说没有JavaScript错误？ –

行'$（“。sub-menu”）。effect（“highlight”，{}，3000）;'正在运行。尝试在'function（$）'中取出'$'，或者在下一行的大括号之后加上'（jQuery）'。 – Andrew

你的脚本不运行，因为$参数没有定义。该解决方案是关闭大括号后添加(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说法.animate()，从而消除了一个.animate()调用所定义。 i * 400延迟会创建所需的级联效果。

来源

2012-10-08 05:10:01 Andrew

谢谢@andrewap！辉煌！ – Kenny

它看起来像'.effect（）'不会对您网页上的任何元素执行任何操作。我还没有弄清楚为什么（我原以为这是一个CSS评估顺序问题，但事实并非如此）。

这是一个可以接受的选择吗？

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

来源

2012-10-03 19:09:55 blackcatweb

谢谢blackcatweb。我不知道为什么'.effect（）'也没有做任何事情，但是你使用'.animate'的想法让我朝着一个好的方向前进。 – Kenny

简单的jQuery功能不起作用

回答

相关问题