Переключить несколько div с несколькими кнопками с помощью animate.css - jQuery

Question

У меня есть три разные кнопки с тремя разными div, которые каждый переключает применимый div в том же месте. Попытка сделать 2 вещи.

1. Добавить класс по .app-icon кнопки при относительной .app-div показывает, так что я могу добавить цвет фона, когда активен.
2. Добавить эффект animate.css при переключении такого же .app-div, что и при исчезновении div, он скользит вниз, а не просто внезапно исчезает.

HTML:

<a href="#" class="app-icon"><i class="fa fa-calculator" aria-hidden="true"></i></a> 
<a href="#" class="app-icon"><i class="fa fa-sun-o" aria-hidden="true"></i></a> 
<a href="#" class="app-icon"><i class="fa fa-rss" aria-hidden="true"></i></a> 

<div class="app-div"> 
content div 1 
</div> 

<div class="app-div"> 
content div 2 
</div> 

<div class="app-div"> 
content div 3 
</div> 

JQuery:

$('.app-icon').click(function() { 
    var index = $(this).index(); 
    $('.app-div').eq(index).toggle().siblings('.app-div').hide(); 
}); 

//animate.css effect 
$('.app-div').addClass('animated fadeInUp'); 

Вот что я до сих пор: https://jsfiddle.net/frshjb373/a5osx7y6/3/

Answer 1

Один из вариантов для обработки if заявление проверки, если значок щелкнул является фактически активен следующим образом:

$('.app-icon').click(function() { 
    var index = $(this).index(); 
    if($(this).hasClass('active')) { 
    $(this).removeClass('active'); 
    $('.app-div').eq(index).addClass('fadeOutDown') 
    } else { 
    $('.app-icon').removeClass('active'); 
    $(this).addClass('active') 
    $('.app-div').hide().eq(index).show().removeClass('fadeOutDown') 
    } 
}); 

---

Updated Demo

Answer 2

Не уверен, что это то, что вы ищете (это трудно, чтобы сделать "не-Glitchy" переключение с использованием только animate.css)

$('.app-icon').click(function() { 
    $('.app-icon.active').not(this).removeClass('active'); 
    var index = $(this).toggleClass('active').index(); 
    $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown').hide(); 
}); 

и применить стиль для .active класса

.app-icon.active{ color:green; } 

JSFiddle

Answer 3

1. «addClass» и «removeClass» (два последних предложения)
2. Я думаю, что «.hide()» была проблема, но также необходимо добавлять и удалять класс для эффекта „fadeOutDown“.

Попробуйте это:

$('.app-icon').click(function() { 
    var index = $(this).index(); 
    if($('.app-div').eq(index).is(":visible")) 
    { 
    $('.app-div').eq(index).addClass('fadeOutDown').slideUp(); 
    } 
    else 
    { 
    $('.app-div').eq(index).removeClass('fadeOutDown').slideDown().siblings('.app-div').slideUp(); 
    } 
    $('.app-icon.current').removeClass("current"); 
    $(this).addClass("current"); 
}); 

EDIT: Чтобы удалить текущий класс, нажав на себя, вы должны переместить addClass ("текущий") в заявлении другого. Вот рабочая демо https://jsfiddle.net/a5osx7y6/5/

Answer 4

Вот идеальный отделка Артуру ответить

HTML

<a href="#" class="app-icon"><i class="fa fa-calculator" aria-hidden="true"></i></a> 
<a href="#" class="app-icon"><i class="fa fa-sun-o" aria-hidden="true"></i></a> 
<a href="#" class="app-icon"><i class="fa fa-rss" aria-hidden="true"></i></a> 

<div style="position: relative"> 
    <div class="app-div"> 
    content div 1 
    </div> 

    <div class="app-div"> 
    content div 2 
    </div> 

    <div class="app-div"> 
    content div 3 
    </div> 
</div> 

CSS

.app-div {display: none; position: absolute; top: 0; left: 0;} 
.app-icon .fa {transition: background-color 0.5s ease;} 
.app-icon .fa:hover {background: #ccc;} 
.app-icon.active {background: #CD87BA;} 

JavaScript

$('.app-icon').click(function() { 
    $('.app-icon.active').not(this).removeClass('active'); 
    var index = $(this).toggleClass('active').index(); 
    $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown'); 
}); 

//animate.css effect 
$('.app-div').addClass('animated fadeOutDown'); 

Working JSFiddle