Question

我左右两列，右栏是一个名为类别的部分，当我点击一个类别时，它会打开（切换）该类别，并关闭左栏中的前一个。

一切正常，我想知道是否有人知道如何在点击类别（链接）时添加淡出淡出效果？

继承我的JQuery代码：

if (n < 0) {
  perror("ERROR writing from socket");
  exit(1);
}

// ...

close(newsockfd);

Answer 1

您必须将transition属性放在其他状态的CSS规则中：

.tab-links a {
  transition:all linear 1s;
}

.tab-links a:hover {
  transition:all linear 1s;
}

li.active a, li.active a:hover {
  transition:all linear 1s;
}

我写1 second来显示效果。看它工作：

http://codepen.io/anon/pen/grxzQa

下次使用stacksnippets，只要不需要外部资源，也不要在不同的服务中注册。

jQuery('.tab-links a').on('click', function(e)  {
  var currentAttrValue = jQuery(this).attr('href');

  // Show/Hide Tabs
  jQuery('.tab-content ' + currentAttrValue).show().siblings().hide();

  // Change/remove current tab to active
  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

  e.preventDefault();
});

.tab-links a {
  padding:9px 15px;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
  background:#7FB5DA;
  font-size:16px;
  font-weight:600;
  color:#4c4c4c;
  transition:all linear 1s;
}

.tab-links a:hover {
  background:#a7cce5;
  text-decoration:none;
  transition:all linear 1s;
}

li.active a, li.active a:hover {
  background:#fff;
  color:#4c4c4c;
  transition:all linear 1s;
}

/*----- Content of Tabs -----*/

.tab {
  display:none;
}

.tab.active {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="tab-links">
  <li class="active"><a href="#tab1">Tab #1</a></li>
  <li><a href="#tab2">Tab #2</a></li>
  <li><a href="#tab3">Tab #3</a></li>
  <li><a href="#tab4">Tab #4</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab active">
    <p>Tab #1 content goes here!</p>
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
  </div>

  <div id="tab2" class="tab">
    <p>Tab #2 content goes here!</p>
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
  </div>

  <div id="tab3" class="tab">
    <p>Tab #3 content goes here!</p>
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
  </div>

  <div id="tab4" class="tab">
    <p>Tab #4 content goes here!</p>
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
  </div>
</div>

Answer 2

你的hide（）/ show（）函数获得了“慢”选项来添加淡入淡出效果。

在代码jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

中尝试此操作

干杯

添加JQuery淡入淡出代码？

2 个答案: