jquery在wordpress模板中的简单运用

前段时间有网友在本站留言，对鼠标经过淡入淡出层的效果非常感兴趣，所以应网友的兴趣，小编特地写一篇技术分享的文章，分享一下这种简单的效果是如何实现的。
jquery是目前非常流行也是使用的非常多的一种效果代码，jquery的基本应用也是非常简单的，她可以实现非常多的酷炫效果，并且只需要加载jquery库，几行非常简单的效果就能够实现了。

下面，我们就介绍一下常用的jquery效果，这些效果都是在网页设计中非常实用并且常见的。使用这些简单的效果，可以让你的wordpress网站更加的酷炫同时兼容性更加的好！

淡入淡出的:hover效果。
对于：hover  相信了解前端基本知识的朋友都会知道，CSS的hover效果是非常直接变化，有时候会让我们觉得有些生硬，使用简单的一句jquery，便能够非擦酷炫的使hover的效果变成淡入淡出的形式，并且对IE6的hover   bug（不支持a标签以外的hover）有非常好的兼容。

首先你需要了解的是CSS种的定位（position）  绝对定位（absolute）和相对定位（relative），使用jquery做hover的效果并不是CSS中真正的hover效果，而是使用定位（position）和层级z-index 在你想要发生变化的层上面加上一个变化的效果层，并使用显示方式（display）隐藏这个层，当鼠标经过这个层的时候，变化的层就使用淡入淡出的方式显示出来。html和CSS如下图：

jquery部分：

$(‘#fuji‘).hover(  //输入父级标签CSS名称或 ID

function() {
$(this).children(‘.ziji‘).stop(true, true).fadeIn(‘1000’);
},//输入子级标签CSS名称或 ID，鼠标移入淡入显示

function() {
$(this).children(‘ziji‘).stop(true, true).fadeOut(‘1000’);
}).click (function () {
//输入子级标签CSS名称或 ID，鼠标移出淡出消失

});

这里 你只需要填写id CSS名称 查找到父级的容器，然后在查找子级的id或css

id  书写方式  #id名称    CSS 书写方式 .CSS名称

查找被变化的不止是子级，可以是任何的标签，范例中是children，也就是查找子级,还有更多的方式可以参考jquery的手册。  不同的动画形式，不同的查找方法，和删除添加元素等，都有详细介绍。

文章写得可能不是很详细，请下载文件，有详细注释，看看文件可能更加的容易理解了！

了解了jquery的简单运用模式，你可以参阅jquery手册，举一反三，做出更多形式更多效果的酷炫网页了！

附件：简单运用的jquery