Javascript issue with easyslider

Question

First visit this page and hover your mouse over the menu: http://milabalami.com/saved/2/index.php

Then visit this Wordpress page where I have implemented the exact same code: http://milabalami.com

When you hover your mouse over the Wordpress menu, you will see that the slider does not show up. Why? I can see that the page gives an error stating:

$ is not a function 
http://miladalami.com/wp-content/themes/sandbox/js/custom.js

Why is that? Its the exact same code that worked perfectly on the other page. I dont understand why it is giving that error on the Wordpress page, and not on the other one where the slider works. Anyone that could assist me in solving this puzzle?

Puzzle solved by Yi Jiang.

Answer 1

It looks like somewhere along the way, the $ got overridden. You can still use your code, however, by using jQuery instead of $ -

jQuery(document).ready(function($) {
    $("#featured").easySlider({
        speed: 400
    });

    $("#menu ul li a[class!='current']")
    .css( {backgroundPosition: "200px 2px"} )
    .mouseover(function(){
        $(this).stop().animate({backgroundPosition:"(0 2px)"}, {duration:400})
    })
    .mouseout(function(){
        $(this).stop().animate({backgroundPosition:"(200px 2px)"}, {duration:400})
    })
});

It's a stopgap measure, however. You should combine all your code into a single file, instead of separating them out like they are right now, and reduce your dependency on plugins.