Jquery Tools Conflict Issue

Question

Hi. I am designing a website using the jQuery Tools library for things like scrolling and tabs. I using their CDN to load jQuery and the Tools library. The problem is when I try to use some of my own jQuery it does not work & more specifically the conflict lies when using jQuery fadeOut. My code lies at the top of this page http://www.nicklansdell.com/sample/about.html and simply fades out the entire content section when a anchor tag is clicked.

I have stripped out the Jquery Tools Library and replaced it with standard Jquery 1.3.2 and my code works fine.

My question is really, does anybody know why this conflict is happening? Or has anybody had similar issues?

Many thanks in advance.

Answer 1

The problem seems to lie with the Flash Embed part of Jquery Tools. I simply downloaded the library one element at a time and linked to each part individually rather than using their CDN to link to the whole library.

Answer 2

Toggle does't work with opacity this way, it has to be a value between 0 and 1 (because you aren't loading in jQuery version 1.4 which supports 'toggle'):

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

I would modify 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'); 
 });
});