WordPress 之链接平移 JQuery 特效

发布于：电脑网络 4,907 次践踏

前段时间给 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;}

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

  1. Pingback: 链接平移与侧边滑动导航栏 - 星期九

  2. 刚有看了一下你的源码，发现你JQuery只在底部加载了一下！
    我现在用的Willin大叔的模版，发现去掉原来的加载项后，模版会自动回载默认的JQuery，头大！！能有什么办法去原来默认回载项吗？谢谢 ！

  3. Pingback: 简单几句话，实现文字平移 | Jauia's Blog

  9. Pingback: 简单实现WordPress 链接平移特效 | 壹品集

  10. 折腾了一下，不过发现在IE下我的相关日志那里，本来所有链接都是一行一行的显示，（一条链接一行显示，多余的字符会自动隐藏）但是发现加了这个效果后，多余的文字全跑出来了，而你这里的相关日志处都没问题呢？我看你也有几篇日志显示不完，隐藏了部分文字啊。

  36. 你也挺浪费的，没那么复杂。
    只需
    css:
    .sidebar li a { position:relative;}
    js:
    $('.sidebar li a').hover(function() {
    $(this).stop().animate({'left': '5px'}, 'slow');
    }, function() {
    $(this).stop().animate({'left': '0px'}, 'slow');
    });
    即可实现，效果请看我的友情链接的移动效果

  48. 发现无论在哪留评论的地方都是显示名字及邮箱地址的啊，这个是明天的内容？还是以前那个“更改用户”链接比较清爽，嗯嗯。

  51. 万戈啊，现在有没准折腾微波啊。我昨天用我的古董机天宇A995大屏手写的下来了UC7.1，上微波好爽啊，手指滑屏。