使用Wordpress页面列表的JQuery导航菜单动画

时间:2009-12-01 05:57:15

标签: jquery wordpress animation menu hover

所以我使用Jquery在我当前的网站上显示一个弹出菜单。 html是一个wordpress wp_list_pages输出,适用于所有wordpresspress类型。对于所有非wordpress类型,这意味着wordpress将输出嵌套的ul& li元素按照wordpress上的页面架构。最重要的是,我希望jquery代码与wordpress兼容,所以如果我更改页面,代码将处理这个。

我希望代码是精简版,但以下内容有点笨拙。有更好的想法吗?另外,我希望弹出菜单仅在鼠标悬停在ulms元素上1000ms(1s)之后出现,否则不会出现。想法?

jQuery(document).ready(function() { 
    jQuery.fn.pauseit = function(duration) {
        jQuery(this).animate({ dummy: 1 }, duration);
        return this;
};
});


jQuery(document).ready(function() { 
    jQuery("div#access li.page_item ul").css({display: "none"}); // Opera Fix 

    jQuery("div#access li.page_item").hover(

        function(){
             jQuery(this).find('ul:first').pauseit(1000).css({/*visibility: "visible",display: "none"*/}).fadeIn('fast');
        },

        function(){
             jQuery(this).find('ul:first').css({/*visibility: "hidden",*/}).fadeOut('fast');

        }
    ); 

}); 

1 个答案:

答案 0 :(得分:1)

所以我在http://cherne.net/brian/resources/jquery.hoverIntent.html发现了hoverIntent。这解决了我的问题。