jQuery Fade piece of content out, then fade another piece in

toymachiner62
toymachiner62 used Ask the Experts™
on
When a link is clicked i want to fade out the visible area, then fade in the hidden area.

I've got the visible area to fade out, but nothing fades in.


Here is the link: http://tcportfolio.hostoi.com/Portfolio.html
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
So the problem is where you get the title attribute of the link that was clicked.  You use $(this), but in the context here $(this) refers to the $('.content') object that you faded out.  To solve this, store a reference to your link and then use that to get the title.  See below (note var a = $(this)):

$("a.tab").click(function() {
  //slide all elements with the class 'content' up
  var a = $(this);
  $(".content").fadeOut("normal", function() {
    //now figure out what the 'title' attribute	value is and fade the element in
    var content_show = a.attr("title");
    $("#"+content_show).fadeIn("normal");
  });
});

Open in new window

Author

Commented:
Now the content comes in, but it's like it fades out, and then just appears instead of fading in. If you click a link, and then click it again you'll see the difference.  Got any other suggestions?
Commented:
Didn't notice at first, but, from the JQ docs (http://docs.jquery.com/Effects/fadeOut#speedcallback), the call back is executed once for each matching element.  So when you have two divs with the class 'content' and add the callback, it's going back and forth a couple times and gets all confused.  So basically we need to make sure the original animations are done before continuing on to the next one.  There's a post about this here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/.  So your click function should look like below.

Also, btw, noticed that you had multiple elements - the tab links - with the same IDs.  That's a bad idea and invalid HTML - might want to fix that.

//when the link is clicked...
$('a.tab').click(function(e) {
  var a = $(this);
  $('.content').fadeOut('normal');
  var wait = setInterval(function() {
    if( !$(".content").is(":animated") ) {
      clearInterval(wait);
      var content_show = a.attr("title");
      $("#"+content_show).fadeIn("normal");
    }
  }, 200);
  
  e.preventDefault();
});

Open in new window

Author

Commented:
Works perfectly, I assume the 200 is the time interval for something, but what does the e.preventDefault() function do?

Commented:
Yes, the 200 is how frequently in milliseconds the setInterval callback is executed.  e.preventDefault() cancels the default action of the element, in this case the link.  So it will prevent the link from being clicked and going to another page.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial