Conflict issue in jQuery

Question

I am developing a site using the jQuery Tools library for things like scrolling and tabs. I use their CDNs to download jQuery and the tool library. The problem is that when I try to use some of my own jQuery, this does not work, and more specifically, the conflict lies when using jQuery fadeOut. My code is at the top of this page http://www.nicklansdell.com/sample/about.html and just disappears in the entire content section when I click on the anchor tag.

I removed the jQuery tool library and replaced it with standard jQuery 1.3.2 and my code works fine.

My question is really, does anyone know why this conflict is happening? Or did someone have similar problems?

Thank you very much in advance.

Answer 1

Toggle does not work with opacity in this way, it should be a value from 0 to 1 (because you do not load in jQuery version 1.4, which supports "switching"):

$(function() $("#show-background").click(function () { $("#content-area").animate({opacity: 'toggle'}, 'slow'); }); }); 

I would change the code to something like this:

 $(function() { $("#show-background").click(function () { var c = $("#content-area"); o = (c.css('opacity') == 0) ? 1 : 0; c.animate({opacity: o}, 'slow'); }); }); 

Answer 2

The problem seems to be related to the part of Flash Embed JQuery Tools. I just downloaded the library one element at a time and attached to each part separately, and did not use my CDN to communicate with the entire library.