Question

我希望将我的WordPress网站http://www.threecell.com/demo加入以下Jquery Snippet（悬停颜色淡入淡出）。下面的代码基于我如何将其适应当前菜单标签结构。我在我的functions.php文件中加载了Jquery。

$(document).ready(function(){ 

//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function(){ 

    //Fade to an opacity of 1 at a speed of 200ms
    $(this).fadeOut(0).addClass('hover').fadeIn(300);

    //On mouse-off
    }, function(){

    //Fade to an opacity of 0 at a speed of 100ms
    $(this).fadeOut(300)
     .queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });

});
});

此处包含相关的菜单样式：

#access {
    padding:0 20px;
    background:#111;
    box-shadow:0 0 7px rgba(0, 0, 0, .1);
}

#access ul {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    font-weight:600;
    text-transform:uppercase;
}

#access li {
    position:relative;
    float:left;
    padding:0;
    margin:0;
}

#access ul li:first-child {
    padding-left:0;
}

#access a {
    display:block;
    padding:15px 24px;
    color:#f0f0f0;
    text-decoration:none;

}

#menu-sample-menu li {
    color: black;
    text-shadow: 0px 1px 4px #777;
    background-color: green;
    padding: 0 12px 0 12px;
}

#menu-sample-menu li a.hover {
    background: orange;
}


#access li.current_page_item > a,
#access li.current-menu-item > a {
    background: orange;
    color: white;
    text-decoration:none;
}

#access a span {
    color:#999;
    font-size:11px;
    font-style:italic;
    font-weight:normal;
    line-height:1.62em;
    text-transform:none;
}

到目前为止，没有触发悬停状态。非常感谢任何协助或指导。

致以最诚挚的问候，

Ť

Answer 1

我在这里创建了一个jsFiddle：http://jsfiddle.net/RV6fE/3/

似乎工作正常。我不得不从你的网站中提取菜单HTML（它在小提琴中看起来有些不可思议）。

查看您的网站，您遇到了javascript错误：

未捕获的TypeError：对象[object Object]的属性'$'不是函数

我不确定究竟是什么导致了这个问题（看起来jQuery在这个脚本块之前被成功加载），但你可以尝试一件事。在您上面粘贴的代码中，更改此内容：

$(document).ready(function(){

到此：

jQuery(document).ready(function($){

我建议这样做的原因是，您的网站上出现了另一个jquery块（我假设它是由您正在使用的主题注入的），它以这种方式设置document.ready事件。

Answer 2

应该将Jquery加载到一个单独的javascript文件中，将其链接到站点代码（header.php）的头部，如下所示：

<script type="text/javascript" src="URL IS HERE"></script>

或标记也位于页面的开头。

建议不要在functions.php文件中插入普通的javascript代码，因为它是Wordpress引擎上其他主要函数的核心，并为php代码结构保留。

简单的颜色FadeIn悬停Jquery与WordPress网站

2 个答案: