How to make tabs fade in

[lucibat]

Im completely ignorant of js, and i have tried to look at many pens in order to incorporate it to my tabs, but nothing Ive done works. Where do I even insert the code?

https://codepen.io/kitglitch/pen/WYQMBm

The lil section on the bottom left are the buttons i use to change tabs btw

[lucibat]

Also just to clarify, i DID try to follow it up with the specific parts of the code im talking about but the generous site wont let me post when i do that.

[Beverleyh]

You’ll probably want to streamline the demo some more before folks will take a real look. We just need a very minimal example of the problem – no visual fluff or big chunks of content like what’s provided – we only need just enough HTML, CSS and JS to illustrate the issue.

However, taking a cursory look at the JS, it appears that the tabs are being switched using display. Unfortunately you can’t animate the display property. With it, an element is either “there” or it’s not. Try looking to different CSS properties to animate between, such as opacity instead.

[lucibat]

Alright I tried to simplify it down:
https://codepen.io/kitglitch/pen/mQVExz

I also tried to replace

$('#base .pages').css({
      'display' : 'none'
    });

with

$('#base .pages').css({
      'opacity' : '0'
    });

But it didn’t work. Instead it rendered it ineffective.

[Beverleyh]

It does work, but you have to switch out all the relevant CSS and JS that uses the display property. And the show() method in jQuery uses display too https://codepen.io/anon/pen/eQJBjw

[lucibat]

In your pen, the divs appear to be lined up beneath one another. So I tried to give .pages an absolute display, only when I do this i cannot highlight the text, or scroll it (I applied your code to my initial pen, and found that i couldnt scroll) because the last div is placed on top of it, tho its invisible. I tried to alter the z-index of the individual tabs, tho it didn’t really make a difference and would prefer not to customize every individual tab if possible

[Beverleyh]

You can use the JS to change the z-index at the same time where the opacity is changed. JQuery’s css() method accepts multiple CSS definitions.

[lucibat]

I actually tried that at the time with 'z-index' : '9999999' and 'position' : 'fixed', both separately and together. It didn’t make a difference so I didn’t bother mentioning it.

[Beverleyh]

I’m on iPhone but it seems to be working for me here. The panels fade in and out and I can scroll each one, with z-index switching between 0 and 1 (no other modifications).

[lucibat]

Alright, so I tried fiddling around with it some more, and it worked. Thankyou for the help

[lucibat]

Hey again. I decided to have them slide in too, so I used a completely different code, and I don’t know how to implement fade. Could you pls help me out? I used this pen.

https://codepen.io/bgaynor78/pen/ntGKm

[Beverleyh]

Why don’t you continue with your original code and look into transforming/animating the translate() property alongside opacity?

You should also research more about transitions, and keyframe animations, to understand more about what you’re doing, and how to use them effectively.

[lucibat]

I have but I couldn’t get it to work. Heck, I even tried other code but given the specific properties of the divs that i want to use this for, it wouldnt work. My divs would become invisible. It just so happened to only work with this code.

[Beverleyh]

I have but I couldn’t get it to work.

Ok – post your slide code modifications and we can offer suggestions as to where you went wrong. I see no reason why it wouldn’t work using translate()

[lucibat]

Alright, I’ll try. The reason why I also preferred the code more was because I really hate how when I control+a the whole page, it not only copies text on the visible tab, but the ones behind it too. The alternative code also doesnt just slide in. Whether it slides in right of left depends on what div you’re on. I have no idea how to even incorporate that into my initial code.

[Author]

Posts