WordPress 之链接平移 JQuery 特效

发布于：电脑网络 2,958 次践踏

前段时间给 WordPress 添加了页面载入中提示效果，这是一个 JQuery 的特效，使用前必须先加载一下几十K之巨的 JQuery 库，而我整个 WordPress 也就这么一个地方利用到了 JQuery 库，如果不充分利用起来似乎有些浪费，所以今天又加上了两个。

主要介绍下 mouseover 链接右平移效果。本人表达能力比较差，所以还是直接看效果吧，请见侧边栏。将鼠标移至无序列表的链接上，就会发现文本链接向右移动了一下下，鼠标移开后，又恢复至原位。

方法如下：

1、载入 JQuery 库，个人比较喜欢 JQuery 1.2系列的版本，短小精悍，太大浪费，俺用不到。

2、关键代码：

jQuery.fn.nudge = function(a) {a = jQuery.extend({amount: 20,duration: 300,property: "padding",direction: "left",toCallback: function() {},fromCallback: function() {}},a);this.each(function() {var h = jQuery(this);var e = a;var d = e.direction;var g = e.property + d.substring(0, 1).toUpperCase() + d.substring(1, d.length);var c = h.css(g);var f = {};f[g] = parseInt(e.amount) + parseInt(c);var b = {};b[g] = c;h.hover(function() {h.stop().animate(f, e.duration, "", e.toCallback)},function() {h.stop().animate(b, e.duration, "", e.fromCallback)})});return this};jQuery(".sidebar li a").nudge({property: "padding",direction: "left",amount: 6,duration: 166});

其中 .sidebar li a 就是控制需要移动的链接，可以看到我这里只要求侧边栏无序列表的链接移动，如果要整站效果，那就直接一个 a 就可以了，如果还需指定添加其他部分，就用半角逗号隔开，如.sidebar li a,h2 a

另外还需要注意的就是加载顺序，JQuery 库是老大，必须放在前面，Over~

2月20日 更新：

感谢 hiro 同学，他又提供了一个代码更加简洁，效果完全相同的方法，第一步还是载入 JQuery 库，第二步是加入以下 JS。

$('.sidebar li a').hover(function() {
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});

第三步，加入以下 CSS：

.sidebar li a {position:relative;}

效果相同，代码当然是越短越好啦，不错不错～