使用WordPress网站进行简单的FadeIn Hover Jquery [英] Simple Color FadeIn Hover Jquery with WordPress site

问题描述

我希望将以下Jquery代码段(悬停时颜色淡入)与我的WordPress网站 http:结合在一起: //www.threecell.com/demo .根据我如何适应当前菜单标签结构，下面包含了代码.我已经在我的functions.php文件中加载了Jquery.

I'm looking to incorporate the following Jquery Snippet (color fadeIn on Hover) with my WordPress website located at http://www.threecell.com/demo. The code is included below based on how I've adapted it to the current menu tag structure. I've loaded the Jquery in my functions.php file.

$(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() });

});
});

此处包含相关菜单样式:

The relevant menu styles are included here:

#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;
}

到目前为止，悬停状态尚未触发.任何帮助或指导，将不胜感激.

Thus far, the hover state isn't being triggered. Any assistance or guidance would be most appreciated.

最诚挚的问候，

T

推荐答案

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

I created a jsFiddle here: http://jsfiddle.net/RV6fE/3/

似乎工作正常.我只需要从您的站点中提取菜单HTML(看起来有些奇怪).

It seems to be working OK. I had to extract just the menu HTML from your site (it looks a little wonky in the fiddle).

在查看您的网站时，您遇到了JavaScript错误:

Looking at your site, you've got a javascript error:

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

Uncaught TypeError: Property '$' of object [object Object] is not a function

我不确定到底是什么引起了此问题(看起来jQuery在此脚本块之前已成功加载)，但是您可以尝试一件事.在上面粘贴的代码中，更改以下内容:

I'm not sure what exactly is causing this issue (it looks like jQuery is being successfully loaded before this script block), but you can try one thing. In the code you pasted above, change this:

$(document).ready(function(){

对此:

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

我建议这样做的原因是，它似乎在您的网站上出现了另一个jquery块(我认为是通过您使用的主题注入的)来以这种方式设置document.ready事件.

The reason I suggest this is that it appears there is another jquery block on your site (which I assume is injected by the theme you're using) which sets the document.ready event in this way.

这篇关于使用WordPress网站进行简单的FadeIn Hover Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！