Karol Jankiewicz Karol Jankiewicz - 1 year ago 103
CSS Question

Switch between cards CSS+jQuery

I made a page with cards one, under next one. I have problem with adding class to active card, Look:

<div id="card" class="card"></div>
<div id="card2" class="card"></div>
<div id="card3" class="card"></div>
<div id="card4" class="card"></div>

// css:

// JS:
$('a').on('click tap', function(e){

When button is clicked jQuery firstly removes from all .card class "active" and after add .active to select element. Problem is with removing class from all divs.
I have animation between switching card.
This make situation when eg. I am on card 3 and clicked on card 4 first I'm see card one (because this is on top without .active) and after that see clicked card.
Someone can help me to solve that trouble?

Edit: Here a jsfiddle: https://jsfiddle.net/2z2v7wz6/

Answer Source

Try changing z-index of previous layer.


$('a').on('click tap', function(e){
  $('.card').css('z-index', '0');
  $('.card.active').css('z-index', '3');


  z-index:4 !important;
  animation:foo 2s ease 1;

Working Fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download