1 Replies - 696 Views - Last Post: 08 October 2012 - 04:17 PM

#1 EdMarx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 24-April 12

Fade Page In And Out

Posted 08 October 2012 - 01:21 PM

I am trying to make a website where the text wrapper changes while everything else(body, background, tabs at top) stay the same. Once the tab is clicked the text fades out and the "next page" fades in.
Here is a rough example I borrowed from another site, but I am having some problems styling it the way I want.

My link

I am just looking for a very rough format so i can build on it.
I was taught how to do jquery slide here

My link

And from that I built this

My link

I imagine the there cant be much of a difference.
Something like use the fadout() function instead of gotoPage()

I tried using the fadeOut() but I havent been able to use it so the text body fades in and out while the rest of the page stays stays the same.

Can anyone help me with a link or very rough code?

Is This A Good Question/Topic? 0
  • +

Replies To: Fade Page In And Out

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 65
  • View blog
  • Posts: 241
  • Joined: 22-November 10

Re: Fade Page In And Out

Posted 08 October 2012 - 04:17 PM

Well, if you keep your tabs index's parallel with your content index's you can achieve what you want pretty easily. For example consider the classes 'tabs' and 'content' as parents and the navigation elements as children. The 'about' tab index is 0 in relation to tabs, so the 'about' content container index should be 0. The 'service' tab index is 1 in relation to content, so the 'service' container index should be 1. and so on.

Here's some code:

$('.tabs')children().on('click', function() {
     var index = $(this).index();
     //the above will fade out all content

     //use the index to get() the correct child in the 'content container' and fade in

Haven't tested, but hope you get the general idea.

This post has been edited by exiles.prx: 08 October 2012 - 04:18 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1