Simple Color FadeIn Hover Jquery with WordPress site

问题

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.

Best regards,

回答1:

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

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).

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

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

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(){

to this:

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

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.

回答2:

The Jquery should be loaded in a separate javascript file, linking it on the head of the site code (header.php) as this:

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

or within tags also in the head of the page.

It is suggested not to insert plain javascript code in the functions.php file, as it is the core of other major functions on the Wordpress engine and reserved for php code structures.

来源：https://stackoverflow.com/questions/18425174/simple-color-fadein-hover-jquery-with-wordpress-site

标签

jquery

wordpress

colors

fadein