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");
    });
});

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.