利用 JQuery 实现图片显隐特效

发布于：电脑网络, 转来载去 3,515 次践踏

今天又挖到一个 JQuery 特效，迫不及待用到 WordPress 上了，是一个利用 JQuery 实现图片显隐的特效，效果可以见我的评论头像，把鼠标移动上去试试看～可以看到头像会渐隐吧，在 IE、Firefox、Chrome 等各大浏览器下都是兼容的，这就是 JQuery 的魅力。

方法转自：http://www.skyoy.com/jquery-picture-hidden-effects.html

第一步：在 header.php 中加载 jquery，可以使用外链也可以内链。

外链可利用 google 提供的 JQ 库，调用格式为：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

内链空间 jquery，把 jquery.min.js 上传到风格的 js 目录下，调用格式为：

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>

第二步：在 header.php 中，添加到 </head> 前，插入代码为：

<script type="text/javascript">
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>

看到这个效果的时候我第一时间想到了用 CSS 实现，因为通过 hover 伪类也可以实现鼠标移动上图片上显隐的效果，不过唯一区别就是，JQuery 实现的显隐有渐变的过渡效果，虽然区别很微弱，不过细节绝定成败，这个 JQuery 也很小巧，何乐而不为呢？