jQuery操作，让WordPress实现图片显隐特效

WordPress建设网站的时候，当鼠标悬停到图片上时，图片变得透明，效果很炫是不是。 如何实现这一特效呢？当然要用到如日中天、功能强大的jquery，很多Wordpress主题中都有加载jquery来实现一些特效，比如滑动菜单、图片幻灯等。 下面就教大家如何把这一特效加入到你的WordPress主题中。 首先需要在h…

WordPress建设网站的时候，当鼠标悬停到图片上时，图片变得透明，效果很炫是不是。

如何实现这一特效呢？当然要用到如日中天、功能强大的jquery，很多Wordpress主题中都有加载jquery来实现一些特效，比如滑动菜单、图片幻灯等。

下面就教大家如何把这一特效加入到你的WordPress主题中。

首先需要在header.php中加载jquery，可以使用外链也可以内链。

外链可以利用google为我们提供的JS库，据说可以提高js加载速度，格式如下：

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

内链格式为：

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

然后再在header.php中添加：

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

保存后，刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效，你也可以在上面的代码中添加选择器，让特定Div容器中的图片具有显隐特效，修改(‘img&#8217😉为例如(‘.thumbnail img,.entry img&#8217😉。

上面的特效是鼠标悬停到图片上时，图片变得透明，我目前用的主题采用的就是上面代码，还有一种是鼠标悬停到图片上时，图片变得清晰，我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果，代码如下：

<script type="text/javascript">
$(function() {
$('img').animate({"opacity": .5 });
$('img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});
</script>