我有三個不同的按鈕和三個不同的div，每個div在同一個地方切換一個適用的div。試圖做2件事。使用animate.css切換多個div使用多個按鈕 - jQuery

在.app-icon按鈕上添加相應的按鈕，當顯示.app-div時，我可以在活動時添加背景顏色。
當切換開關.app-div時，添加animate.css效果，以便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/

來源

2016-09-22 frshjb373

一個選項是處理一個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

來源

2016-09-22 16:19:07 DaniP

正是我所期待的！很棒。 – frshjb373

不知道如果這就是你要找的內容（這是很難做出「無出問題」切換隻使用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

來源

2016-09-22 16:19:14

「addClass」和「removeClass」（最後兩句）
我覺得「.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"); 
});

編輯：要通過點擊本身應該移動addClass（「電流」）else語句中刪除當前的類。這裏是一個工作演示https://jsfiddle.net/a5osx7y6/5/

來源

2016-09-22 16:22:06 niboc

這裏是完美的句號，以阿圖爾回覆

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

來源

2016-09-22 16:57:42 aasiph

使用animate.css切換多個div使用多個按鈕 - jQuery

回答

Updated Demo

相關問題