Question

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

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