Can't make .fadeOut() work with JQuery 1.7.1

Question

I'm trying to make the two modal boxes on my site's homepage fade out using .fadeOut(). If you visit the site, you'll see that the website is stuck on the first one. It's supposed to fadeOut when clicked.

http://mitsuifinearts.com/wp/

I have made it work in a test file, so I know my code works. But when I integrate it into the Wordpress site, it breaks.

My JS is here: http://mitsuifinearts.com/wp/wp-content/themes/apex/js/modal-fade.js

If I add the following line of code to header.php, the modals will work, but most of the other JQuery in the site breaks:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

I see that JQuery 1.7.1 is being called earlier in the . Shouldn't that allow the .fadeOut() work? It's not been deprecated, so far as I can tell.

Answer 1

WordPress uses jQuery.noConflict() by default. So try replacing $ with the jQuery variable:

jQuery(document).ready(function() {
    jQuery('.modal1').click(function() {
        jQuery('.modal1').fadeOut('slow');
    });
});
jQuery(document).ready(function() {
    jQuery('.modal2').click(function() {
        jQuery('.modal2').fadeOut('slow');
    });
});