jquery切換div動畫和同一時間的類名更改

Question

感謝您的關注第一， 我使用jquery這個目標`當我點擊$（'。icon'）它必須做兩件事先動畫$（' .thediv'）改爲{top：of'90px and back 0px'}，第二件事是改變$（'。icon'）類以獲得V形圖案並返回V形圖案， 我不明白我做得對; 這裏是小提琴

var fltro = function(){ 
 
\t var t = 200; 
 
\t $('.filter-tog .fa').click(function(){ 
 
\t \t $('.filter').animate({top: '70px'}, t); 
 
\t \t $('.filter-tog .fa').removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
 
\t }); 
 
    $('.filter-tog .fa').click(function(){ 
 
\t \t $('.filter').animate({top: '20px'}, t); 
 
\t \t $('.filter-tog .fa').removeClass('fa-chevron-up').addClass('fa-chevron-down'); 
 
\t }); 
 
}; 
 
$(document).ready(fltro);

.header{ 
 
    height:50px; 
 
    width:300px; 
 
    background-color:red; 
 
} 
 
.filter{ 
 
\t width: 300px; 
 
    height: 40px; 
 
    position: absolute; 
 
    top: 20px; 
 
    background-color: rgb(16, 160, 122); 
 
    z-index: -4; 
 
} 
 
.filter-tog{ 
 
\t width: 20px; 
 
    height: 15px; 
 
    color: white; 
 
    background-color: rgb(27, 77, 88); 
 
    position: absolute; 
 
    top: 8px; 
 
    left: 308px; 
 
    z-index: 8; 
 
} 
 
.filter-tog i{ 
 
\t line-height: 15px; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    color: white; 
 
    float: none; 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
</div> 
 
<div class="filter-tog"> 
 
\t <i class="fa fa-chevron-down"></i> 
 
</div> 
 
<div class="filter"> 
 
</div>

Answer 1

只需使用一個變量來保持的切換狀態的狀態軌跡：

var t = 200, st = 0; 
$('.filter-tog .fa').click(function() { 
    if (st==0){ 
     $('.filter').animate({ 
      top: '70px' 
     }, t); 
     $('.filter-tog .fa').switchClass('fa-chevron-down', 'fa-chevron-up'); 
     st++; 
    }else{ 
     $('.filter').animate({ 
      top: '20px' 
     }, t); 
     $('.filter-tog .fa').switchClass('fa-chevron-up', 'fa-chevron-down'); 
     st = 0; 
    } 
}); 

jsFiddle Demo

Answer 2

嘿提問者我花了一點時間來幫助和解釋在重構中你有一點代碼。這將有助於實現您與具有再添加庫如jQuery UI

https://jsfiddle.net/kriscoulson/jocqqqb5/

jQuery的

$(document).ready(function(){ 
    var $button = $('.filter-tog'); // find the button for clicking 
    var $buttonIcon = $button.find('i'); // find the arrow for changing 
    var $filter = $('.filter'); // find the filter so we can animate 

    // Create a function to change the Icon 
    var changeArrow = function() { 
     $buttonIcon.toggleClass('fa-chevron-down').toggleClass('fa- chevron-up') 
    } 

    // Create a function to add animate class use css 
    var animate = function(){ 
     $filter.toggleClass('animate'); 
    } 

    // Anytime the button is clicked run the arrow and animate functions; 
    $button.on('click',function(){ 
     changeArrow(); 
     animate(); 
    }); 
}); 

CSS

.filter { 
    width: 300px; 
    height: 40px; 
    position: absolute; 
    top: 20px; 
    background-color: rgb(16, 160, 122); 
    z-index: -4; 
    /* Use the transition property so anytime the 
    top position is changed the animation will be applied */ 
    transition: top 1s; 
} 

.animate { 
    top: 90px; 
}