jQuery 折腾小记

“Wordpress是一个要不断折腾的程序”，是的，自从爱上了强大的jQuery以后，对Wordpress的折腾一发不可收拾。如果要找个折腾的理由，那么我想说：jQuery库这么大，要物尽其用嘛。

超链接向右侧平滑移动

其效果见侧栏除标签云的任何超链接，鼠标放上去后会向右侧平滑移动5px。

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

超链接的载入提示

以前发过一篇文章《超链接的载入提示》，大家看这里就可以了。

点击后显示 EMAIL

为了公开自己的Email却又不想让软件搜索到，大家常用的办法就是把EMAIL地址弄成图片的形式发布出来，这样的话基本就不会被搜索到了。但是有个问题，就是真正想发给你的人不能复制你的邮箱，只能对着上面一个字一个字的敲出来，这样是不是很麻烦？下面这段代码的作用就是让大家贴出文本EMAIL，却又不能被搜索到的方法。

$(".myemail").click(function() {
    var A = "i";
    var B = "jan.cm";
    var C = A + "@" + B;
    $(this).hide();
    setTimeout(function() {
        var D = $(".myemail");
        D.next().hide();
        D.text(C);
        D.attr("href", "mailto:" + C).unbind("click");
        D.fadeIn(1000)//这个1000是淡出的时间，单位毫秒；
    },1)
});

图片悬停半透明

效果大家把鼠标放在侧栏上面的广告图片或者用户评论排行榜的头像上就看得到，鼠标放上去后会出现半透明的效果。

$('img').hover(function() {
    $(this).animate({
        'opacity': .5//鼠标放上去后，透明度50%；
    })
},function() {
    $(this).animate({
        'opacity': 1//鼠标移除后，不透明；
    })
});

超链接新窗口打开

如果一个超链接不去设置target属性为新窗口打开的话，那么这些超链接点击后都会在原窗口打开，这样的话用户体验感很不好，以前我的做法是装了一个插件，但是作为喜欢折腾的人，插件能少一个是一个。用jQuery简单的一句代码就能搞定这个问题，何乐而不为呢？

$('a)').attr({
    target: "_blank"
});

相关日志显示隐藏

点击相关日志，可以使相关日志隐藏或者显示，这个纯属好玩。

$(".related_post_title").click(function(){
$(".related_post").slideToggle("slow");
})

这里还有一个加强版的，使用Cookie来记录用户的操作，点击隐藏后，下次再进入到相关页面，将会一直隐藏，直到Cookie过期或者用户自己再次点击显示。使用加强版还需要加载一个jQuery的插件jQuery.cookie.js，另外非常郁闷，jQuery这么强大的库为什么就没有操作Cookie的相关函数呢？

if ($.cookie('relatedposts') == 'hide') {
    $(".related_post").hide()
} else {
    $(".related_post").show()
}
$(".related_post_title").click(function() {
    $(".related_post").slideToggle("slow");
    if ($.cookie('relatedposts') == 'hide') {
        $.cookie('relatedposts', 'show', {
            expires: 72 * 60 * 60,//Cookie的生命周期，单位毫秒，下面一样的；
            path: '/'
        })
    } else {
        $.cookie('relatedposts', 'hide', {
            expires: 72 * 60 * 60,
            path: '/'
        })
    }
});

这里要注意的是选择器的问题，上面的代码，全部都是$('XXX')开头，这些就是选择器，选择哪些地方起到作用，如果有不明白的去这里的帮助文档文件夹下载一个jQuery的帮助文档看看吧，欢迎大家多多交流。

就写这么多吧，其实还有一些，不过那些基本都是直接Copy过来的，自己也没研究过，或者是没研究明白。以后还继续折腾，比如页面载入提示、当前页面的锚记平滑滚动、滑过评论显示回复按钮等等，很多很多等着我折腾呢，呵呵。

THE-END

PREVIOUS 简单方法开启 Gzip 压缩

NEXT 简单的分享与收藏

博主的jQuery折腾小记很有趣，通过简单的代码实现了超链接的平滑移动、超链接的载入提示、点击后显示邮箱、图片悬停半透明、超链接新窗口打开、相关日志显示隐藏等功能。博主把这些功能运用到自己的博客中，让博客的交互性更强，用户体验感更好。期待博主继续折腾，带来更多有趣的功能。

已有 37 条评论

逸冰浙江 2010-06-29 08:31

回复

看来jQuery真的好强大哦
- 冰剑 MOD 湖南 2010-06-30 21:26
  
  回复
  
  是很强大，选几个应用吧，哈哈。

万戈上海 2010-06-29 20:15

回复

这个我喜欢啊，jquery的强大永远也学不完
- 冰剑 MOD 湖南 2010-06-30 21:26
  
  回复
  
  很多都是在你那学习的，还要感谢你。

Firm 福建 2010-06-29 22:12

回复

5PX看不太出来
- 冰剑 MOD 湖南 2010-06-30 21:26
  
  回复
  
  5PX还看不出来那就是你自己的问题了。

丕子山东 2010-06-30 16:27

回复

嗯最近也一直在学习这个
- 冰剑 MOD 湖南 2010-06-30 21:26
  
  回复
  
  我们共同学习。。

维C生活北京 2010-06-30 19:41

回复

很实用，顶了，多谢分享

扣扣网湖北 2010-06-30 19:41

回复

多学是好事，可惜我现在想学都没时间了。支持博客继续开发哈哈 :???:
- 冰剑 MOD 湖南 2010-06-30 21:26
  
  回复
  
  时间就像乳沟，挤挤总会有的。

丕子山东 2010-07-01 08:00

回复

$(document).ready(function(){
$('#close-sidebar').click(function() {
alert("aa");
});
});
关闭
没有效果请问是能有啥原因？ jquery引用进来了
- 冰剑 MOD 湖南 2010-07-01 10:14
  
  回复
  
  你是放在了jquery的前面还是后面啊，这要放在后面才会有效，否则找不到$函数的。
  
  丕子山东 2010-07-01 11:56
  
  回复
  
  放在后面了

海天无影江苏 2010-07-01 11:30

回复

那个右移的还是有点bug 会和有的jQ的Tab栏冲突所以我去掉了~

丕子山东 2010-07-01 11:58

回复

对了你写写在文章页面中把侧边栏隐藏了吧我写的一直没效果已进入文章页面就没有侧边栏这个功能我试验了好几次都不行
- 冰剑 MOD 湖南 2010-07-01 12:01
  
  回复
  
  隐藏侧边栏，五木那里有很多文章http://immmmm.com/close-show-sidebar-prefect-code.html，你看看吧。
  
  丕子山东 2010-07-01 16:58
  
  回复
  
  都看了哎感觉方法没错但是inove的主题是不是有关
  
  冰剑 MOD 湖南 2010-07-01 17:01
  
  回复
  
  晚上我折腾一下自己的主题试试，弄好了再告诉你。
  
  冰剑 MOD 湖南 2010-07-01 17:41
  
  回复
  
  去掉了侧栏后，要在 #container 加个 class 样式，这是 inove 本身就有的。
  用jquery简单的写就是
  $("#sidebar").hide(); $("#container").addClass("one-column");
  不过这样没有按钮，也没有动态效果，自己慢慢改吧，关键就是那个 class 样式。

老七江西 2010-07-01 21:53

回复

好厉害一个不会~~
- 冰剑 MOD 湖南 2010-07-02 19:00
  
  回复
  
  慢慢折腾呗，我也是在折腾中学习的。

寨主浙江 2010-07-02 11:08

回复

额，不知道怎么用。
- 冰剑 MOD 湖南 2010-07-02 19:00
  
  回复
  
  确实没写明用法，但这些都是核心的代码，你只要学会使用一种，其他的就迎刃而解了。

彼岸星辰陕西 2010-07-02 11:28

回复

被你把我的头像从首页给折腾不见了。我再来一次。
- 冰剑 MOD 湖南 2010-07-02 19:00
  
  回复
  
  额，那个排行榜每个月月初就会重新统计的。

权子浙江 2010-07-03 22:13

回复

来踩踩~~~

苏扬浙江 2010-07-04 12:53

回复

怎么高手全在折腾jquery啊，看来我也要学学！

拆墙部队上海 2010-07-17 08:57

回复

锋利的 JQ 好东西，我说以后叫 JavaQcript 好了，这单词，多带劲。JavaScript 啊啊啊啊。

随缘安徽 2010-08-10 10:29

回复

我的邮箱点击显示也搞不出来 :shock:
- 冰剑 MOD 湖南 2010-08-10 13:45
  
  回复
  
  有没有导入jQuery库啊？没导入JQ库是不能用的。

snowxh 天津 2010-08-14 00:47

回复

哦哦 jQuery我超爱的(^o^)/
木木的点击关闭侧边栏代码不规范- -
我居然敢说这种话今天在一个小盆友的帮助下完善成最规范的了。。
- 冰剑 MOD 湖南 2010-08-14 01:08
  
  回复
  
  我也很喜欢JQ，太强大了，哈哈。。
  你家很多地方有木木家的影子，比如侧栏的tabbox，顶部的导航。。。。
  
  snowxh 天津 2010-08-14 01:18
  
  回复
  
  尴尬尴尬导航想要lavalamp弄不出来= =#
  木木是俺jQuery启蒙老师等俺成熟鸟超越他就木有影子了
  抽搐- -^我在说什么！
  
  冰剑 MOD 湖南 2010-08-14 01:21
  
  回复
  
  去看看iNove的教程，说不定有帮助。。
  我起初学习JQ的时候也常在木木那里看他的日志，学到了很多。。

N 江苏 2010-08-18 11:06

回复

Jquery改变了很多淫写代码的方式捏

无冷四川 2011-04-15 19:46

回复

这个有几个还没折腾过，