求助：Code Pen中jQuery在Safari/Chrome无法生效（FCC致敬页开发）

嘿，我看了你的情况，来帮你排查下jQuery UI的shake效果没生效的问题。咱们一步步来：

1. 确认jQuery与jQuery UI的加载顺序 #

jQuery UI完全依赖jQuery运行，所以必须先加载jQuery，再加载jQuery UI。你可以去CodePen的Settings > JavaScript面板里调整这两个库的排序，把jQuery拖到jQuery UI的上方。

2. 确保代码在DOM就绪后执行 #

如果你的JS代码在页面元素还没加载完成时就运行，那#shake这个链接元素还没被创建，事件绑定自然无效。把你的shake效果代码包裹在DOM就绪回调里：

// 简写的DOM就绪写法
$(function() {
  // 给id为shake的链接绑定hover触发抖动的逻辑
  $("#shake").hover(function() {
    $(this).effect("shake");
  });
});

3. 检查事件绑定与方法调用的正确性 #

• 确认选择器没错：你的链接id是shake，所以$("#shake")是正确的选择器。
• 检查方法拼写：别把effect写成affect，或者shake拼写错误。
• 可以自定义抖动参数让效果更明显，比如：

$("#shake").hover(function() {
  $(this).effect("shake", {
    distance: 15,  // 抖动的横向距离
    times: 4       // 抖动次数
  }, 600);         // 动画时长（毫秒）
});

4. 查看控制台报错信息 #

打开CodePen的开发者工具（按F12），切换到Console面板，看看有没有报错提示：

• 如果提示$ is not defined：说明jQuery没加载成功，检查Settings里的jQuery库是否正确添加。
• 如果提示effect is not a function：说明jQuery UI没加载好，或者加载顺序错了。

内容的提问来源于stack exchange，提问作者Kjel Sidloski