Раздвижные анимационные заикания в аккордеоне

Question

У меня есть меню аккордеона с вкладками. Когда вы нажимаете на вкладки, информация отображается под одним из них, плавно перемещая вверх и вниз.

Проблема заключается в том, что в анимации заикается, в течение slideUp и slideDown. Я также попробовал animate и отрегулировал некоторые из css, но я не могу понять это.

Если это помогает, вот fiddle.

HTML:

<div class="project-container"> 


These don't slide well: 
    <ul class="project-nav"> 
    <li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a> 
    <section class="is-open"> 
    <p id="current-project-title">TITLE</p> 
    <p>TEXT HERE</p> 
    </section> 
    </li> 
    <li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a> 
    <section> 
INFO HERE<br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </section> 
    </li> 
     </ul> 
     </div> 

<br> 
But this slides VERY well: 
<br> 
      <button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button> 
      <section class="info-container"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section> 

Javascript:

$(document).ready(function() { 
    var Tabs = { 

    el: { 
    nav: $(".project-nav"), 
    tabs: $(".project-nav > .project-tab > a"), 
    panels: $(".project-nav > .project-tab > section"), 
    }, 

    init: function() { 
    Tabs.bindUIActions(); 
    }, 
    bindUIActions: function() { 
    Tabs.el.nav 
     .on(
     'click', 
     '.project-tab > a:not(.active)', 
     function(event) { 
      Tabs.deactivateAll(); 
      Tabs.activateTab(event); 
      event.preventDefault(); 
     } 
    ); 
    }, 

    deactivateAll: function() { 
    Tabs.el.tabs.removeClass("active"); 
    Tabs.el.panels.removeClass("is-open").slideUp('slow'); 
    }, 
    activateTab: function(event) { 
    $(event.target) 
     .addClass("active") 
     .next() 
     .addClass("is-open").slideDown('slow'); 
    } 
}; 

Tabs.init(); 




////// Slide Doesn't Work For Tabs 
$('.project-tab section.is-open').slideDown('slow'); 



////// Slide Works For Toggle Button 
$('.toggle-info').click(function() { 
    $('.info-container').slideToggle('slow'); 
    $("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down"); 
}); 
}); 

Answer 1

Это ваша проблема

.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link, 
#current-project-link:hover, .project-nav section.is-open, .project-nav section { 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 

Вы добавляете переход CSS скользить элемент, это сделать эффект слайд не работает должным образом, вы должны удалить его

вы можете попробовать jsfiddle

Answer 2

Мне удалось добиться желаемого эффекта с помощью CSS вместо jquery. Я использовал max-height переходов, чтобы вкладки скользили вверх и вниз и вниз плавно.

Вот обновленный fiddle.

И вот новый CSS:

///// RESPONSIVE ACCORDION TO TABS 


.project-container { 
    display: block; 
} 

.project-nav { 
    list-style: none; 
    position: relative; 
} 

.project-nav a:active{ 
    opacity:1; 
} 

.project-nav .project-tab { 
    display: inline; 
    } 

.project-nav > .project-tab > a { 
    display: inline-block; 
    padding: 10px 15px; 
    background-color: #00A88C; 
    border: solid 1px #00A88C; 
    border-radius: 0px 10px; 
    text-decoration: none; 
    color: #fff; 
    width:40%; 
    font-size: 30pt; 
    clear: both; 
    text-align: center; 
} 

#project-tab-1 { 
    margin-right: 2%; 
    margin-left: 7%; 
} 

#project-tab-2 { 
    margin-left: 2%; 
} 

#project-tab-link:hover { 
    background-color: #13ebc7; 
    border-color: #13ebc7; 
} 

#project-tab-link.active { 
    color: #00A88C!important; 
    background-color: rgba(19, 235, 199, 0)!important; 
} 

#project-tab-link.active:hover { 
    border-color: #00A88C; 
} 

.project-nav section { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    float: left; 
    color:#5c5c5c; 
    overflow: hidden; 
    border: solid 1px #00A88C; 
    width:100%; 
    margin-top:10px; 
    padding-bottom: 15px; 
    opacity: 0; 
} 

.project-nav section.is-open { 
    position: static; 
    opacity: 100; 
} 

.project-tab section p { 
    font-family:'century gothic'; 
    padding: 0px 30px; 
} 

.project-tab section p:empty { 
    display: none; 
} 

#current-project-title{ 
    font-size: 16pt; 
} 

#current-project-link { 
    float: right; 
    padding: 5px; 
    background: #00A88C; 
    color:#fff; 
    margin-right: 30px; 
    width: auto; 
} 

#current-project-link:hover { 
    background: #13ebc7; 
} 

.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link, 
#current-project-link:hover, .project-nav section.is-open, .project-nav section { 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 


@media only screen and (max-width: 730px) { 
    #front-page-textbox{ 
     background: #0f2347; 
     color: #fff; 
    } 
.project-container { 
     margin-bottom: 10px; 
    } 

    .project-nav .project-tab a { 
    display: block; 
    width:100%; 
    border-radius: 0px; 
    } 

    #project-tab-1, #project-tab-2 { 
     margin-left: 0; 
     margin-right: 0; 
} 

    .project-nav .project-tab a.active { 
    border: solid 1px #13ebc7; 
    } 

    .project-nav section { 
    margin:0; 
     position: relative; 
    top: auto; 
    left: auto; 
    float: none; 
    max-height:0; 
    padding-bottom: 0px; 
    opacity: 100; 
    } 

.project-nav section.is-open { 
    border-radius: 0px; 
    border-top: none; 
    max-height: 1200px; 
} 
    .project-tab > a:after { 
     font-family: 'Glyphicons Halflings'; 
     content: "\e080"; 
     float: right; 
     font-size: 20pt; 
     margin-top: 10px; 
    } 
    .project-tab > a.active:after{ 
     font-family: 'Glyphicons Halflings'; 
     content: "\e114"; 
     float:right; 
     font-size: 20pt; 
     margin-top: 10px; 
    } 



/// TOGGLE BUTTON 

.toggle-info { 
    display: block; 
    width: 100%; 
    color: #f5f5f5; 
    padding: 10px 15px; 
    background-color: #00A88C; 
    font-size: 30pt; 
} 

.toggle-info i{ 
    font-size: 10pt; 
    margin-top: 10px; 
    float: right; 
    display: block; 
} 

.toggle-info:hover { 
    background-color: #13ebc7; 
} 

.toggle-info, .toggle-info:hover { 
     -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 

.info-container{ 
    padding: 10px 15px; 
border: solid 1px #00A88C; 
}