WordPress Jquery Fade in, Fade out effect

Question

I'm following a tutorial.

I've included the hover.js with the following code:

$(function() {
    // OPACITY OF BUTTON SET TO 50%
    $(".imgopacity").css("opacity","0.5");

    // ON MOUSE OVER
    $(".imgopacity").hover(function () {
        // SET OPACITY TO 100%
        $(this).stop().animate({
            opacity: 1.0
        }, "slow");
    },

    // ON MOUSE OUT
    function () {
        // SET OPACITY BACK TO 50%
        $(this).stop().animate({
            opacity: 0.5
        }, "slow");
    });
});

But it doesn't work, on chrome it says: http://i52.tinypic.com/4jnsdd.png

Here's the site i'm working on: http://goo.gl/dlB1u

and this is the image wherein i applied the effect/css class: http://i54.tinypic.com/6h1ds0.png

sorry for posting image urls it says i can't post images yet on stackexchange

Answer 1

Going through your source - jQuery Source - it seeems that noConflict() is getting called right at the end.

To fix your hover.js then would look something like this:

jQuery(function($) {    //Allow the use of $ namespace in this function.
    // OPACITY OF BUTTON SET TO 50%
    $(".imgopacity").css("opacity","0.5");

    // ON MOUSE OVER
    $(".imgopacity").hover(function () {

    // SET OPACITY TO 100%
    $(this).stop().animate({
        opacity: 1.0
        }, "slow");
   },

    // ON MOUSE OUT
   function () {

   // SET OPACITY BACK TO 50%
   $(this).stop().animate({
       opacity: 0.5
       }, "slow");
   });
});

Regards,

Answer 2

Do not use "$()" in Wordpress use "jQuery()" instead.