簡單的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功能不起作用

回答

相關問題