JQuery 鼠标滑动渐隐渐显效果

发布于：电脑网络 3,026 次践踏

最近我工作以外的生活就是围绕着 WordPress 新主题转了，是和尘埃老哥合作的主题，雏形已经做出来了，有好奇心的朋友可以去尘埃的网站一睹为快，这是给尘埃定制的主题，所以主题的名字就由他给起了，PRChina，是一款以红色为主色调的主题。因为刚刚搭好布局，还有很多功能没有完善，自己看着都不是很满意。

尘埃的网站是以图片分享为主题的，所以为了整站的加载速度，预载了 JQuery 的 lazyload，既然已经用上了 JQuery，不多用两个，就显得浪费了。尘埃也是这么认为的，所以还打算给导航部分加个 JQuery 的效果。说到导航部分的 JQuery 效果，我最先想到的就是著名的 lavalamp，不过 MS 要改动的 HTML 和 CSS 都比较多，我又实在懒得大规模修改了，于是我又想到了另一个效果，也就是我现在头部 RSS 订阅部分用到的渐隐渐显的效果，当然，这也是 JQuery，而且不需要另外加载 lavalamp 插件，应该说是精简不少，效果也很显著。

我就先写一下这个渐隐渐显的 JQuery RSS 展示的方法吧，之后再移植到新主题上去。话说这是从某个高手的网站上借鉴来的，不过用的太久，出处早就忘了，向作者说声抱歉啦～

1.加载 JQuery

这个已经说过很多次了吧，可以用 google 的 JQuery 库，又或者是调用自己本地的 JQuery，经测试 JQuery 1.2x 版本就足够了。

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

2.HTML 部分

<div id="rss">
    <a id="rssurl" href="http://feed.wange.im" target="_blank"></a>
    <div id="rsstip">
    请点击右上角的 RSS 按钮并选择适合您的订阅方式～
    </div>
</div>

3.CSS 部分

这里可以自由发挥，唯一需要注意的是，要给 #rsstip 加入 display:none; 的属性，意思就是默认隐藏提示文字，鼠标移动上之后才渐显出来，也就是下一步。

4.JS 执行代码

$(function() {
    $('#rssurl,#rsstip').mouseover(function() {
        if (window.willhide) clearTimeout(window.willhide);
        $('#rsstip').fadeIn(500)
    });
    $('#rssurl,#rsstip').mouseout(function() {
        window.willhide = setTimeout(function() {
            $('#rsstip').fadeOut(500)
        },
        750)
    });
});

这个也没啥好说的，唯一需要注意的就是这段 JS 代码必须放在 JQuery 之后，顺序问题。

好了，继续折腾去啦。