正在添加JQuery淡入淡出代码

Adding JQuery fade code?

本文关键字：淡出 代码 淡入 JQuery 添加      更新时间：2023-10-01

我有左右两列，右列用于一个名为类别的部分，当我单击一个类别时，它会打开（切换）该类别并关闭左列上的上一个类别。

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

这是我的JQuery代码：

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

您必须将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>

您的hide（）/show（）函数获得了添加渐变效果的"slow"选项。

在您的代码jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow"); 中尝试此操作

干杯

相关文章：