WordPress 文字移动特效

发表于 更新于 分类于 本文字数： 251 阅读时长 ≈ 1 分钟

方法一：

1、载入 JQuery 库！

2、在js中加入如下代码：

1
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 库!

第二步是加入JS代码如下：

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

第三步，加入以下 CSS：

1
.sidebar li a {position:relative;}

好了，现在你可以看看效果如何！