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;
}

在手风琴中滑动动画口吃

2 个答案: