Question

我正在使用jQuery在标签设计上使用幻灯片动画在每个标签之间切换。我是第一个承认我还在学习jQuery的人，但我遇到的问题是跳跃而不是流畅的动画然后隐藏两个标签。延迟的原因是添加过渡，因此当它向上滑动并且第二层下降时它是平滑的运动。按钮活动类模仿了漂亮外观的时间。

我在哪里......

jQuery(document).ready(function(){
  jQuery('.schedule-tab-links a[href*="#day2"]').click(function(){
    jQuery('.schedule-tab-active').slideToggle('450');
    jQuery('#day2').delay('450').slideToggle('450');
    jQuery('.button-active').delay('450').removeClass('button-active');
    jQuery('.schedule-tab-links a[href*="#day2"]').delay('450').addClass('button-active');
    jQuery('.schedule-tab-active').delay('450').removeClass('schedule-tab-active');
    jQuery('#day2').delay('450').addClass('schedule-tab-active');
  });
});

您可以看到完整代码here

Answer 1

.delay(450)对.addClass() / .removeClass()无效。

仅适用于动画。所以你必须使用.setTimeout()。

然后，您希望仅当该选项卡尚未激活时才会发生该效果吗？否则，它无助地上下滑动。

此处更新：

jQuery(document).ready(function(){
  jQuery('.schedule-tab-links a[href*="#day2"]').click(function(){
    if(!$(this).hasClass("button-active")){
      jQuery('.schedule-tab-active').slideToggle('450');
      jQuery('#day2').delay('450').slideToggle('450');
      setTimeout(function(){
        jQuery('.button-active').removeClass('button-active');
        jQuery('.schedule-tab-links a[href*="#day2"]').addClass('button-active');
        jQuery('.schedule-tab-active').removeClass('schedule-tab-active');
        jQuery('#day2').addClass('schedule-tab-active');
      },450);
    }
  });
});

.schedule-tab-links {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-top: 1em;
}
.schedule-tab-links li {
  display: inline-block;
}
.schedule-tab-links li a {
  padding: .5em;
  background: #e8e8e8;
}
.schedule-tab-links li .button-active {
  background-color: #999;
}
.schedule-tabs {
  padding: 2em; 
  margin-top: 1em;
  display: none;
}
.schedule-tabs.schedule-tab-active {
  display: block;
}
#day1 { background-color: green; }
#day2 { background-color: grey; }
#day3 { background-color: purple; }
#day4 { background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul class="schedule-tab-links">
  <li><a href="#day1" class="button-active">Day 1</a></li>
  <li><a href="#day2">Day 2</a></li>
  <li><a href="#day3">Day 3</a></li>
  <li><a href="#day4">Day 4</a></li>
</ul>
<div id="day1" class="schedule-tabs schedule-tab-active">Day 1 content goes here</div>
<div id="day2" class="schedule-tabs">Day 2 content goes here</div>
<div id="day3" class="schedule-tabs">Day 3 content goes here</div>
<div id="day4" class="schedule-tabs">Day 4 content goes here</div>
</body>
</html>

然后，我建议你也为这些标签使用一个类......为了稍微改变一下这个点击处理程序......而不是重复它4次或更多次。

使用$(this)是一个提示......
;）

添加和删除用于切换选项卡的类

1 个答案:

添加和删​​除用于切换选项卡的类

1 个答案:

添加和删除用于切换选项卡的类